lightSlider 好图片轮播插件 支持移动端
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>
