您的位置：首页 > 移动开发

lightSlider 好图片轮播插件 支持移动端

2015-05-29 11:18 204 查看
http://jquery-plugins.net/jquery-lightslider-lightweight-responsive-content-slider
https://github.com/sachinchoolur/lightslider
api : http://sachinchoolur.github.io/lightslider/settings.html
demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lightSlider 图片滚动</title>

    <link rel="stylesheet"  href="css/lightslider.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/lightslider.js"></script> 

<style>
*{ margin:0; padding:0;}
ul{
list-style: none outside none;
padding-left: 0;
margin: 0;
}
.main{ width:100%; max-width:640px; margin:0 auto; border:ccc 1px solid;}
img{ width:100%;}
.main .test{ width:100%; margin:5% 0; border:red 1px solid;}

</style>
</head>
<body>

<div class="main">
<p>演示地址：http://sachinchoolur.github.io/lightslider/examples.html</p>
<p>api:  http://sachinchoolur.github.io/lightslider/settings.html</p> <div class="test">
<!-- 开始 -->
<ul id="image-gallery" class="gallery list-unstyled cS-hidden">
<li data-thumb="img/thumb/cS-1.jpg">
<img src="img/cS-1.jpg" />
</li>
<li data-thumb="img/thumb/cS-2.jpg">
<img src="img/cS-2.jpg" />
</li>
<li data-thumb="img/thumb/cS-3.jpg">
<img src="img/cS-3.jpg" />
</li>
<li data-thumb="img/thumb/cS-4.jpg">
<img src="img/cS-4.jpg" />
</li>
<li data-thumb="img/thumb/cS-7.jpg">
<img src="img/cS-7.jpg" />
</li>
<li data-thumb="img/thumb/cS-8.jpg">
<img src="img/cS-8.jpg" />
</li>
<li data-thumb="img/thumb/cS-9.jpg">
<img src="img/cS-9.jpg" />
</li>
<li data-thumb="img/thumb/cS-10.jpg">
<img src="img/cS-10.jpg" />
</li>
<li data-thumb="img/thumb/cS-11.jpg">
<img src="img/cS-11.jpg" />
</li>
</ul>
<!-- 结束 -->
</div>

<div class="test">
<!-- 开始 -->
<ul id="tu-gallery" class="gallery list-unstyled cS-hidden">
<li data-thumb="img/thumb/cS-1.jpg">
<img src="img/cS-1.jpg" />
</li>
<li data-thumb="img/thumb/cS-2.jpg">
<img src="img/cS-2.jpg" />
</li>
<li data-thumb="img/thumb/cS-3.jpg">
<img src="img/cS-3.jpg" />
</li>
<li data-thumb="img/thumb/cS-4.jpg">
<img src="img/cS-4.jpg" />
</li>
<li data-thumb="img/thumb/cS-12.jpg">
<img src="img/cS-12.jpg" />
</li>
<li data-thumb="img/thumb/cS-13.jpg">
<img src="img/cS-13.jpg" />
</li>
<li data-thumb="img/thumb/cS-14.jpg">
<img src="img/cS-14.jpg" />
</li>
<li data-thumb="img/thumb/cS-15.jpg">
<img src="img/cS-15.jpg" />
</li>
</ul>
<!-- 结束 -->
</div>

<div class="test">
<!-- 开始 -->
<ul id="sc-gallery" class="gallery list-unstyled cS-hidden">
<li data-thumb="img/thumb/cS-1.jpg">
<img src="img/cS-1.jpg" />
</li>
<li data-thumb="img/thumb/cS-2.jpg">
<img src="img/cS-2.jpg" />
</li>
<li data-thumb="img/thumb/cS-3.jpg">
<img src="img/cS-3.jpg" />
</li>
<li data-thumb="img/thumb/cS-4.jpg">
<img src="img/cS-4.jpg" />
</li>
<li data-thumb="img/thumb/cS-12.jpg">
<img src="img/cS-12.jpg" />
</li>
<li data-thumb="img/thumb/cS-13.jpg">
<img src="img/cS-13.jpg" />
</li>
<li data-thumb="img/thumb/cS-14.jpg">
<img src="img/cS-14.jpg" />
</li>
<li data-thumb="img/thumb/cS-15.jpg">
<img src="img/cS-15.jpg" />
</li>
</ul>
<!-- 结束 -->
</div>

<div class="test">
<!-- 开始 -->
<ul id="sr-gallery" class="gallery list-unstyled cS-hidden">
<li data-thumb="img/thumb/cS-1.jpg">
<img src="img/cS-1.jpg" />
</li>
<li data-thumb="img/thumb/cS-2.jpg">
<img src="img/cS-2.jpg" />
</li>
<li data-thumb="img/thumb/cS-3.jpg">
<img src="img/cS-3.jpg" />
</li>
<li data-thumb="img/thumb/cS-4.jpg">
<img src="img/cS-4.jpg" />
</li>
<li data-thumb="img/thumb/cS-12.jpg">
<img src="img/cS-12.jpg" />
</li>
<li data-thumb="img/thumb/cS-13.jpg">
<img src="img/cS-13.jpg" />
</li>
<li data-thumb="img/thumb/cS-14.jpg">
<img src="img/cS-14.jpg" />
</li>
<li data-thumb="img/thumb/cS-15.jpg">
<img src="img/cS-15.jpg" />
</li>
</ul>
<!-- 结束 -->
</div>

<div class="test">
<!-- 开始 -->
<ul id="vertical" class="gallery list-unstyled cS-hidden">
<li data-thumb="img/thumb/cS-1.jpg">
<img src="img/cS-1.jpg" />
</li>
<li data-thumb="img/thumb/cS-2.jpg">
<img src="img/cS-2.jpg" />
</li>
<li data-thumb="img/thumb/cS-3.jpg">
<img src="img/cS-3.jpg" />
</li>
<li data-thumb="img/thumb/cS-4.jpg">
<img src="img/cS-4.jpg" />
</li>

</ul>
<!-- 结束 -->
</div>

</div>

<script>
$(document).ready(function() {

$('#image-gallery').lightSlider({
gallery:true,   //显示成图标还是圆点
item:1,       //大图：每页个数
thumbItem:3,   //小图：每页个数
slideMargin: 0,   //大图直接的空隙
speed:500,   //播放速度
auto:true,   //自动播放
loop:true,   //是否开启循环
mode:'slide',   //出现方式 fade
keyPress: true,   //键盘控制
controls: true,  //左右控制箭头
onSliderLoad: function() {
$('#image-gallery').removeClass('cS-hidden');
},
onAfterSlide: function ($el, scene) {   //滚动后的回调函数   $el:当前   scene：当前索引值
console.log(scene);
// $el.goToSlide();  //去最近的幻灯片例:slider.goToSlide(3)
// $el.goToNextSlide();  //去下一个幻灯片
}
});

$('#tu-gallery').lightSlider({
gallery:false,   //显示成图标还是圆点
item:1,       //大图：每页个数
slideMargin:5,
speed:500,
auto:true,
loop:true,
enableDrag: true,
onSliderLoad: function() {
$('#tu-gallery').removeClass('cS-hidden');   //加载完成图片显示
}
});

$('#sc-gallery').lightSlider({
gallery:false,   //显示成图标还是圆点
item:5,       //大图：每页个数
slideMargin:5,
slideWidth:200,
slideMove:4,
speed:500,
auto:true,
loop:true,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
// autoWidth:true,  //宽度自适应
//rtl:true,   //反方向
enableDrag: true,   //是否可以拖动
currentPagerPosition:'left',
onSliderLoad: function() {
$('#sc-gallery').removeClass('cS-hidden');   //加载完成图片显示
}
});

$('#sr-gallery').lightSlider({
gallery:false,   //显示成图标还是圆点
item:3,       //大图：每页个数
slideMargin:5,
slideWidth:200,
slideMove:4,
speed:500,
auto:true,
loop:true,
easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
// autoWidth:true,  //宽度自适应
//rtl:true,   //反方向
enableDrag: true,   //是否可以拖动
currentPagerPosition:'left',
keyPress: true,   //键盘控制
controls: false,  //左右控制箭头
vertical: false,  //方向
currentPagerPosition: 'right',
enableTouch:true,
onSliderLoad: function() {
$('#sr-gallery').removeClass('cS-hidden');   //加载完成图片显示
}
});

$('#vertical').lightSlider({
gallery:false,   //显示成图标还是圆点
item:2,       //大图：每页个数
slideMargin:5,
slideWidth:200,
slideMove:4,
speed:500,
auto:true,
loop:true,
// autoWidth:true,  //宽度自适应
//rtl:true,   //反方向
enableDrag: true,   //是否可以拖动
currentPagerPosition:'left',
keyPress: true,   //键盘控制
controls: true,  //左右控制箭头
vertical: true,  //方向
verticalHeight: 200,  //纵向高度
onSliderLoad: function() {
$('#vertical').removeClass('cS-hidden');   //加载完成图片显示
}
});

});

</script>

</body>
</html>








内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航