lightSlider 好图片轮播插件 支持移动端
2024-09-17 05:57:00
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>
最新文章
- Delphi_09_Delphi_Object_Pascal_面向对象编程
- Tomcat 让百度的域名显示自己的页面内容（玩耍篇）
- Aspose.Cells 首次使用，用到模版填充数据，合并单元格，换行
- JMeter 安装与使用基本教程
- minicom使用
- docker ubuntu
- java apache commons HttpClient发送get和post请求的学习整理(转)
- python练习程序（显示图像）
- Android Thread.UncaughtExceptionHandler捕获
- Monitor vs WaitHandle
- ASCII Table/ASCII表
- BZOJAC400题留念
- sort命令详解
- c++ thread
- js回溯法计算最佳旅行线路
- Batch Normalization 与 Caffe中的 相关layer
- zk节点扩充
- struts2和JSON的数据交互
- python类与对象各个算数运算魔法方法总结
- 【C#/WPF】用System.Timers.Timer计时器做浮窗广告