建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:9收藏

简介

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