欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > 焦点图

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

所属栏目:焦点图更新时间:2016-11-04原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明

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





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

标签:
代码下载(0)
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

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

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

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

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

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

4jquery轮播焦点图

5jquery灯箱画廊插件lightgallery

6js卡片式图片叠加滚动切换代码

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

8jquery旋转木马插件SLICK

93D效果图片轮播效果代码

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

最新更新的

1jQuery响应式触屏图片左右滚动代码

2移动端滑动JS响应式轮播图插件

3jQuery倾斜图片切换滚动焦点图幻灯片代码

4jQuery版仿淘宝商城天猫首页多格焦点图效果

5易迅网竖排多格jquery焦点图代码

6jQ索引按钮+缩略图双重切换

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

8鼠标滑过+自动播放jQ全屏焦点图代码

9Diapo轮播图-幻灯片插件

10JQUERY多变的幻灯片-COOLCAROUSELS-做中右切换