unoSlider

Back Next

v1.0.1 ( 1.73 KB ZIP)

DEMO 1

unoSlider 特点

任何内容都能切换
unoSlider 支持视频，iframe和其他任何html元素。
使用简单...
unoSlider 有限的切换效果和设置参数，让事情变得简单，同时你等获得快速的内容切换。
小而精干且依然强大
unoSlider 可以用在新闻提示，Tab标签界面和进行内容轮播切换。
轻量级
别看俺的个头小，依然多才多艺，unoSlider 最小可以在 2KB 一下。
动态项目导航
当 unoSlider 初始化后，便能立刻为你生成动态项目导航。

DEMO 2

无导航按钮 + 自动切换

无导航按钮
如果不需要导航，可以直接设置取消。
自动循环
是否需要自动循环功能看你是否需要。
要快还是要慢
内容切换方式和速度，你都可以通过手工设置。

DEMO 3

无过度效果 + 自动切换

不想要滚动切换！
你牛，不要滚动切换，硬切，完全可以，自己设置吧。
完全掌控
播放，暂停，下一个，上一个... 你可以为这些功能添加自定义的按钮。

DEMO 4

重大新闻

UnoSilder 是一个 jQuery 插件，用它，你可以打造简单不失优雅，且又多功能的内容切换效果。如果你需要这种内容切换效果的时候，它就非常有用了，你可以定义你自己的新闻提示和Tab标签，具体效果可以看本页上面的演示。其丰富的功能和设置选项，按需配置，一切随你。

用　法
插件选项
API 接口

基本的内容切换

首先，当然是要把CSS文件加入了。
```
<link rel="stylesheet" href="css/unoSlider.min.css" type="text/css" media="screen" />
```
第二步，把jQuery脚本和unoSlider的脚本加载上：
```
...

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/unoSlider-1.0.min.js"></script>

</body>
</html>
```
基本的内容切换只需要下面的HTML代码即可：
```
<div id="sliderId">
  <ul>
    <li class="current"></li>
    <li></li>
    <li></li>
  </ul>
</div>
```
li之间的任何内容都会被作为一个切换展示的内容，current这个类的样式，决定页面加载完成后，首先显示的切换内容。

重要的一步，还得初始化插件，看下面的代码：
```
... 

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/unoSlider-1.0.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		// My Uno Slider
		window.unoSlider = $('#sliderId').unoSlider();
	});
</script>

</body>
</html>
```
以上设置完后，你的内容切换效果就OK了，自动循环切换，默认切换间隔时间是5秒。

带导航的内容切换

要给你的内容切换增加个按钮导航？当然可以，只需要在你的样式为 sliderid 的 DIV 标签内添加一个div，并且给这个 div 定义样式为unoSliderNav 即可。就是这么简单！
```
<div id="sliderId">
	<div class="unoSliderNav"></div>
	<ul>
		<li class="current"></li>
		<li></li>
		<li></li>
	</ul>
</div>
```

插件选项

下面的选项，是用来控制切换内容行为的。

animSpeed:	250,		// 效果切换时间，单位毫秒。
speed:		5,		// 两个内容切换之间的间隔时间，单位秒。
auto:		true,		// 默认为自动切换且循环，false为关闭。
easing:		'swing',	// 内容切换的效果：linear 或者 swing，也可以通过 jQuery Easing Plugin 扩展。
next:		false,		// '#next' 可选项，下一个的按钮选择器。
prev:		false,		// '#prev' 可选项，上一个的按钮选择器。
pause:		false,		// '#pause' 可选项，暂停的按钮选择器。
bullets:	false,		// 是否开启导航按钮。ture 开启，需要在容器内增加样式为unoSliderNav的容器。
selector:	'li'		// 切换内容的容器，默认为 li。 
callback:	function(){}	// 切换后的函数回调，function 函数内的 this 表示当前内容的索引值。

API 接口说明

下面是一些 unoSilider 公开的功能调用，以便你能对你的内容切换有更全面的控制。

initialize

params: none

Usage: unoSlider.initialize()

Sets up the slider for first time user.

startTimer

params: none

Usage: unoSlider.startTimer()

Start the auto rotating timer for the slider.

killTimer

params: none

Usage: unoSlider.killTimer()

Stops the auto rotating timer for the slider.

resetTimer

params: none

Usage: unoSlider.resetTimer()

Resets the auto rotating timer for the slider.

goForward

params: none

Usage: unoSlider.goForward()

Moves the slider forward by one slide.

goBack

params: none

Usage: unoSlider.goBack()

Moves the slider forward by one slide.

goTo

params: number

Usage: unoSlider.goTo(1)

Makes the slider go to the slide number — this is not the 0 based index but the actual slide number.

unoSlider

基本的内容切换

带导航的内容切换

插件选项

API 接口说明