注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

轻量级触摸响应式滑块插件JQuery lightSlider

媒体 fishcity 3127浏览

响应式滑块插件JQuery lightSlider

JQuery lightSlider 是一个轻量级触摸响应式的滑块插件,压缩后只有5KB,当然,lightSlider 只需配置下参数便可以实现多种不同的动效果,如滚动滑块,幻灯片,图片画廊等,更重要的是lightSlider是响应式的,可用于移动端,PC端,不得不说这是一款非常强大而又易用的jquery插件。下面来看下它的用法吧。

在head区引入核心文件

<link type="text/css" rel="stylesheet" href="css/lightSlider.css" />                  
<script src="//ajax.useso.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/lightSlider.js"></script>
// 不要同时引入 lightSlider.js 和 lightSlider.min.js,它们只需引入一个就可以了,当然建议引入min版

构建html,li里面可以是图片也可以是文字

<ul id="lightSlider">
  <li>
      <h3>First Slide</h3>
      <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
  </li>
  <li>
      <h3>Second Slide</h3>
      <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>
  ...
</ul>

调用插件初始化

 $(document).ready(function() {
    $("#lightSlider").lightSlider(); 
  });

各项参数

$(document).ready(function() {
    $("#lightSlider").lightSlider({
        slideWidth:270, //宽度
        slideMargin:0,  //间距
        slideMove:1,   //一次滚动1张
        minSlide:1,   //最少显示一张
        maxSlide:8,   //最大显示8张
 
        pager:true,  //分页
        controls:true, //显示按钮
        prevHtml:'',  //上一张按钮html内容
        nextHtml:'',  //下一张按钮html内容
        keyPress:true, //支持键盘操作
        thumbWidth:50, //缩略图宽
        thumbMargin:3,  //缩略图间距
        gallery:false,  //是否使用画廊
        currentPagerPosition:'middle', //当前页显示的方式
        
        useCSS:true, //是否使用CSS样式
        auto: false, //是否自动播放
        pause: 2000, //播放的间隔时间
        loop:true,   //是否循环播入
        easing: '',  //使用的动画效果
        speed: 1000, //动画时间
        mode:"slide", //使用的模式
        swipeThreshold:10, 动画缓冲阀值
 
        onBeforeStart: function(){}, //初始前执行的函数
        onSliderLoad: function() {}, //加载时执行的函数
        onBefroreSlide:function(){}, //滚动开始前执行的函数
        onAfterSlide:function(){},  //滚动开始后执行的函数
        onBeforeNextSlide: function(){}, //下一滚动时执行的函数
        onBeforePrevSlide: function(){} //上一帧动画时执行的函数
    });
});

公共参数

 $(document).ready(function() {
    var slider = $("#lightSlider").lightSlider();
    slider.goToSlide(3); //跳到第3图片
    slider.goToPrevSlide(); //跳到上一张图片
    slider.goToNextSlide(); //跳到下一张图片
    slider.getCurrentSlideCount(); //取得当前图片索引值
    slider.refresh(); //刷新
  });

转载请注明:jQ酷 » 轻量级触摸响应式滑块插件JQuery lightSlider

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。