新零售商城 快打包
热门标签
当前位置:首页 > JS代码 > 焦点图

jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js

所属栏目:焦点图 时间:2016-11-04 来源:网络 作者:不详 次围观 次下载
jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js
兼容:Firefox,Chrome,Safari,IE10+,IE9,IE8
查看演示
下载地址
收藏
http://demo.16css.com/jdt/1298
http://v1.16css.comhttp://d.16css.com/d/file/jdt/201611/16css.com_8735751df2063c86bb52960287fd0a38.jpg

JQuery lightSlider 是一个轻量级触摸响应滑块插件(5KB缩减)


如何使用 lightSlider?

将下面的代码添加到您的文档<head>。

<link type="text/css" rel="stylesheet" href="css/lightSlider.css" />                   
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script> <script src="js/lightSlider.js"></script> 
// Do not include both lightSlider.js and lightSlider.min.js

HTML 结构

<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>

调用 lightSlider!

<script type="text/javascript">   
$(document).ready(function() {     
$("#lightSlider").lightSlider();    
}); 
</script>

设置

<script type="text/javascript"> 
$(document).ready(function() {     
$("#lightSlider").lightSlider({         
slideWidth:270,         
slideMargin:0,         
slideMove:1,         
minSlide:1,         
maxSlide:8,           
pager:true,         
controls:true,         
prevHtml:'',         
nextHtml:'',         
keyPress:true,         
thumbWidth:50,         
thumbMargin:3,         
gallery:false,        
currentPagerPosition:'middle',                 
useCSS:true,         
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(){}     
}); 
}); 
</script> 
公共方法 
<script type="text/javascript">   
$(document).ready(function() {     
var slider = $("#lightSlider").lightSlider();     
slider.goToSlide(3);     
slider.goToPrevSlide();     
slider.goToNextSlide();     
slider.getCurrentSlideCount();     
slider.refresh();   
}); 
</script>

各项参数解释

$("#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() {} //上一帧动画时执行的函数 
});





具体效果请看演示,一流资源网推荐下载。

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

共有 条评论

给个评价吧

验证码:
下载最多的

1jquery手机端响应式banner图片滚动切换效果

2jquery灯箱画廊插件lightgallery

3兼容触屏手机浏览的JS全屏焦点图代码

4带左右箭头滑动焦点图幻灯片jQuery特效代码

5jQuery touchSlider全屏图片轮播幻灯焦点图代码

6Jquery全屏BANNER焦点图代码/幻灯片代码 - SuperSlidev2.1

7仿支付宝2013版jquery全屏图片幻灯片焦点图代码

8简洁的左右切换jquery焦点图代码

9无缩略图全屏/宽屏/满屏焦点图代码

最新更新的

1多参数可设置的JQ焦点图幻灯图片代码

2jquery灯箱画廊插件lightgallery

4jQuery滑动旋转木马插件silvertrack

5jQuery灯箱弹出窗口插件litebox V1.1

6jQuery轮播图插件插件IPresenter

7jQuery旋转木马插件Owl Carousel

8jQ轻量级触摸响应滑块插件JQuery lightSlideruery轮播图插件movingboxes.js

10jQuery图片轮播(焦点图)插件