JQuery轻便快速轮播图插件Un slider

简介

Unslider是一款快速、轻便的滑块JQuery插件，只有箭头，没有花哨的效果。该插件未压缩时的重量为4kb，压缩后的重量为1.9kb，是一个非常轻的轮播滑块解决方案。

使用

1.  引入文件

<link href="unslider.css" rel="stylesheet"> 
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="unslider.js"> </script>

2.  HTML

<div class="banner">
  <ul >
    <li style=" background-image: url(http://unslider.com/img/sunset.jpg);"></li>
    <li style=" background-image: url(http://unslider.com/img/wood.jpg);"></li>
    <li style="background-image: url(http://unslider.com/img/subway.jpg);"></li>
    <li style="background-image: url(http://unslider.com/img/subway.jpg);"></li>
  </ul>
</div>

3.  调用

初试化：

$(function() {
  unslider = $('.banner').unslider({
    speed: 500,//  切换的速度 
    delay: 3000,//  切换的速度
    keys: true,	//  是否启用左右按钮控制slider切换
    fluid: false,// 是否每次在容器大小改变的时候，修正slider的大小
    pause:true,//鼠标以上去是否暂停播放
    starting:function(){
      //每次开始切换时回叫方法
      console.log("starting");
    },
    complete:function(){
      //每次完成切换时回叫方法
      console.log("complete");
    },
    arrows: true,//  是否显示左右箭头，用于slider切换
    dots: true//  是否显示白色圆点，用于slider切换
  });
});

使用：

var data = unslider.data('unslider');
// 开始
data.start();
// 暂停
data.stop();
//  切换至第n个 function是回调函数
data.move(2, function() {});
//  data.move(0);
//  切换下一个data.next();
// 切换上一个data.prev();

相关链接

GitHub 地址：https://github.com/seanwittmeyer/Unslider