http://jquery-plugins.net/jquery-lightslider-lightweight-responsive-content-slider

https://github.com/sachinchoolur/lightslider

api : http://sachinchoolur.github.io/lightslider/settings.html

demo:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>lightSlider 图片滚动</title>
  6.  
  7.     <link rel="stylesheet"  href="css/lightslider.css"/>
  8.     <script src="js/jquery.min.js"></script>
  9.     <script src="js/lightslider.js"></script> 
  10.  
  11. <style>
  12. *{ margin:0; padding:0;}
  13. ul{
  14.     list-style: none outside none;
  15.     padding-left: 0;
  16.     margin: 0;
  17. }
  18. .main{ width:100%; max-width:640px; margin:0 auto; border:ccc 1px solid;}
  19. img{ width:100%;}
  20. .main .test{ width:100%; margin:5% 0; border:red 1px solid;}
  21.  
  22. </style>
  23. </head>
  24. <body>
  25.  
  26. <div class="main">
  27.     <p>演示地址：http://sachinchoolur.github.io/lightslider/examples.html</p>
  28.        <p>api:  http://sachinchoolur.github.io/lightslider/settings.html</p>
  29.     <div class="test">
  30.       <!-- 开始 -->
  31.         <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
  32.                 <li data-thumb="img/thumb/cS-1.jpg">
  33.                     <img src="img/cS-1.jpg" />
  34.                 </li>
  35.                  <li data-thumb="img/thumb/cS-2.jpg">
  36.                     <img src="img/cS-2.jpg" />
  37.                 </li>
  38.                 <li data-thumb="img/thumb/cS-3.jpg">
  39.                     <img src="img/cS-3.jpg" />
  40.                  </li>
  41.                 <li data-thumb="img/thumb/cS-4.jpg">
  42.                     <img src="img/cS-4.jpg" />
  43.                  </li>
  44.                  <li data-thumb="img/thumb/cS-7.jpg">
  45.                         <img src="img/cS-7.jpg" />
  46.                 </li>
  47.                 <li data-thumb="img/thumb/cS-8.jpg">
  48.                     <img src="img/cS-8.jpg" />
  49.                 </li>
  50.                 <li data-thumb="img/thumb/cS-9.jpg">
  51.                     <img src="img/cS-9.jpg" />
  52.                  </li>
  53.                 <li data-thumb="img/thumb/cS-10.jpg">
  54.                     <img src="img/cS-10.jpg" />
  55.                  </li>
  56.                 <li data-thumb="img/thumb/cS-11.jpg">
  57.                     <img src="img/cS-11.jpg" />
  58.                  </li>
  59.         </ul>
  60.         <!-- 结束 -->
  61.     </div>
  62.  
  63.    <div class="test">
  64.       <!-- 开始 -->
  65.         <ul id="tu-gallery" class="gallery list-unstyled cS-hidden">
  66.                 <li data-thumb="img/thumb/cS-1.jpg">
  67.                     <img src="img/cS-1.jpg" />
  68.                 </li>
  69.                  <li data-thumb="img/thumb/cS-2.jpg">
  70.                     <img src="img/cS-2.jpg" />
  71.                 </li>
  72.                 <li data-thumb="img/thumb/cS-3.jpg">
  73.                     <img src="img/cS-3.jpg" />
  74.                  </li>
  75.                 <li data-thumb="img/thumb/cS-4.jpg">
  76.                     <img src="img/cS-4.jpg" />
  77.                  </li>
  78.                  <li data-thumb="img/thumb/cS-12.jpg">
  79.                         <img src="img/cS-12.jpg" />
  80.                  </li>
  81.                 <li data-thumb="img/thumb/cS-13.jpg">
  82.                     <img src="img/cS-13.jpg" />
  83.                  </li>
  84.                 <li data-thumb="img/thumb/cS-14.jpg">
  85.                     <img src="img/cS-14.jpg" />
  86.                  </li>
  87.                 <li data-thumb="img/thumb/cS-15.jpg">
  88.                     <img src="img/cS-15.jpg" />
  89.                 </li>
  90.         </ul>
  91.         <!-- 结束 -->
  92.     </div>
  93.  
  94.     <div class="test">
  95.       <!-- 开始 -->
  96.         <ul id="sc-gallery" class="gallery list-unstyled cS-hidden">
  97.                 <li data-thumb="img/thumb/cS-1.jpg">
  98.                     <img src="img/cS-1.jpg" />
  99.                 </li>
  100.                  <li data-thumb="img/thumb/cS-2.jpg">
  101.                     <img src="img/cS-2.jpg" />
  102.                 </li>
  103.                 <li data-thumb="img/thumb/cS-3.jpg">
  104.                     <img src="img/cS-3.jpg" />
  105.                  </li>
  106.                 <li data-thumb="img/thumb/cS-4.jpg">
  107.                     <img src="img/cS-4.jpg" />
  108.                  </li>
  109.                  <li data-thumb="img/thumb/cS-12.jpg">
  110.                         <img src="img/cS-12.jpg" />
  111.                  </li>
  112.                 <li data-thumb="img/thumb/cS-13.jpg">
  113.                     <img src="img/cS-13.jpg" />
  114.                  </li>
  115.                 <li data-thumb="img/thumb/cS-14.jpg">
  116.                     <img src="img/cS-14.jpg" />
  117.                  </li>
  118.                 <li data-thumb="img/thumb/cS-15.jpg">
  119.                     <img src="img/cS-15.jpg" />
  120.                 </li>
  121.         </ul>
  122.         <!-- 结束 -->
  123.     </div>
  124.  
  125.     <div class="test">
  126.       <!-- 开始 -->
  127.         <ul id="sr-gallery" class="gallery list-unstyled cS-hidden">
  128.                 <li data-thumb="img/thumb/cS-1.jpg">
  129.                     <img src="img/cS-1.jpg" />
  130.                 </li>
  131.                  <li data-thumb="img/thumb/cS-2.jpg">
  132.                     <img src="img/cS-2.jpg" />
  133.                 </li>
  134.                 <li data-thumb="img/thumb/cS-3.jpg">
  135.                     <img src="img/cS-3.jpg" />
  136.                  </li>
  137.                 <li data-thumb="img/thumb/cS-4.jpg">
  138.                     <img src="img/cS-4.jpg" />
  139.                  </li>
  140.                  <li data-thumb="img/thumb/cS-12.jpg">
  141.                         <img src="img/cS-12.jpg" />
  142.                  </li>
  143.                 <li data-thumb="img/thumb/cS-13.jpg">
  144.                     <img src="img/cS-13.jpg" />
  145.                  </li>
  146.                 <li data-thumb="img/thumb/cS-14.jpg">
  147.                     <img src="img/cS-14.jpg" />
  148.                  </li>
  149.                 <li data-thumb="img/thumb/cS-15.jpg">
  150.                     <img src="img/cS-15.jpg" />
  151.                 </li>
  152.         </ul>
  153.         <!-- 结束 -->
  154.     </div>
  155.  
  156.     <div class="test">
  157.       <!-- 开始 -->
  158.         <ul id="vertical" class="gallery list-unstyled cS-hidden">
  159.                 <li data-thumb="img/thumb/cS-1.jpg">
  160.                     <img src="img/cS-1.jpg" />
  161.                 </li>
  162.                  <li data-thumb="img/thumb/cS-2.jpg">
  163.                     <img src="img/cS-2.jpg" />
  164.                 </li>
  165.                 <li data-thumb="img/thumb/cS-3.jpg">
  166.                     <img src="img/cS-3.jpg" />
  167.                  </li>
  168.                 <li data-thumb="img/thumb/cS-4.jpg">
  169.                     <img src="img/cS-4.jpg" />
  170.                  </li>
  171.  
  172.         </ul>
  173.         <!-- 结束 -->
  174.     </div>
  175.  
  176. </div>
  177.  
  178.  <script>
  179.  $(document).ready(function() {
  180.  
  181.     $('#image-gallery').lightSlider({
  182.         gallery:true,   //显示成图标还是圆点
  183.         item:1,       //大图：每页个数
  184.         thumbItem:3,   //小图：每页个数
  185.         slideMargin: 0,   //大图直接的空隙
  186.         speed:500,   //播放速度
  187.         auto:true,   //自动播放
  188.         loop:true,   //是否开启循环
  189.         mode:'slide',   //出现方式 fade
  190.         keyPress: true,   //键盘控制
  191.         controls: true,  //左右控制箭头
  192.         onSliderLoad: function() {
  193.             $('#image-gallery').removeClass('cS-hidden');
  194.         },
  195.         onAfterSlide: function ($el, scene) {   //滚动后的回调函数   $el:当前   scene：当前索引值
  196.            console.log(scene);
  197.           // $el.goToSlide();  //去最近的幻灯片例:slider.goToSlide(3)
  198.           // $el.goToNextSlide();  //去下一个幻灯片
  199.         }
  200.     });
  201.  
  202.    $('#tu-gallery').lightSlider({
  203.         gallery:false,   //显示成图标还是圆点
  204.         item:1,       //大图：每页个数
  205.         slideMargin:5,
  206.         speed:500,
  207.         auto:true,
  208.         loop:true,
  209.         enableDrag: true,
  210.         onSliderLoad: function() {
  211.             $('#tu-gallery').removeClass('cS-hidden');   //加载完成图片显示
  212.         }
  213.     });
  214.  
  215.    $('#sc-gallery').lightSlider({
  216.         gallery:false,   //显示成图标还是圆点
  217.         item:5,       //大图：每页个数
  218.         slideMargin:5,
  219.         slideWidth:200,
  220.         slideMove:4,
  221.         speed:500,
  222.         auto:true,
  223.         loop:true,
  224.         easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
  225.        // autoWidth:true,  //宽度自适应
  226.         //rtl:true,   //反方向
  227.         enableDrag: true,   //是否可以拖动
  228.         currentPagerPosition:'left',
  229.         onSliderLoad: function() {
  230.             $('#sc-gallery').removeClass('cS-hidden');   //加载完成图片显示
  231.         }
  232.     });
  233.  
  234.    $('#sr-gallery').lightSlider({
  235.         gallery:false,   //显示成图标还是圆点
  236.         item:3,       //大图：每页个数
  237.         slideMargin:5,
  238.         slideWidth:200,
  239.         slideMove:4,
  240.         speed:500,
  241.         auto:true,
  242.         loop:true,
  243.         easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
  244.        // autoWidth:true,  //宽度自适应
  245.         //rtl:true,   //反方向
  246.         enableDrag: true,   //是否可以拖动
  247.         currentPagerPosition:'left',
  248.          keyPress: true,   //键盘控制
  249.         controls: false,  //左右控制箭头
  250.          vertical: false,  //方向
  251.          currentPagerPosition: 'right',
  252.          enableTouch:true,
  253.         onSliderLoad: function() {
  254.             $('#sr-gallery').removeClass('cS-hidden');   //加载完成图片显示
  255.         }
  256.     });
  257.  
  258.    $('#vertical').lightSlider({
  259.         gallery:false,   //显示成图标还是圆点
  260.         item:2,       //大图：每页个数
  261.         slideMargin:5,
  262.         slideWidth:200,
  263.         slideMove:4,
  264.         speed:500,
  265.         auto:true,
  266.         loop:true,
  267.        // autoWidth:true,  //宽度自适应
  268.         //rtl:true,   //反方向
  269.         enableDrag: true,   //是否可以拖动
  270.         currentPagerPosition:'left',
  271.          keyPress: true,   //键盘控制
  272.         controls: true,  //左右控制箭头
  273.          vertical: true,  //方向
  274.          verticalHeight: 200,  //纵向高度
  275.         onSliderLoad: function() {
  276.             $('#vertical').removeClass('cS-hidden');   //加载完成图片显示
  277.         }
  278.     });
  279.  
  280. });
  281.  
  282. </script>
  283.  
  284. </body>
  285. </html>

lightSlider 好图片轮播插件 支持移动端的更多相关文章

  1. 面板支持单个，多个元素的jQuery图片轮播插件

    一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  2. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  3. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  4. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  5. 图片轮播插件-carouFredSel

    carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...

  6. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  7. 图片轮播插件Nivo Slider

    推荐:图片轮播插件Nivo Slider         因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是, ...

  8. AdPlayBanner：功能丰富、一键式使用的图片轮播插件

    AdPlayBanner:功能丰富.一键式使用的图片轮播插件 AdPlayBanner是一个Android平台基于ViewPager实现的轮播图插件,主要用以自动或者手动地播放轮播图,提供了Fresc ...

  9. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

随机推荐

  1. 【Henu ACM Round#20 A】 Fancy Fence

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 看看有没有(n-2)*180/n等于输入的a就好. [代码] #include <bits/stdc++.h> usin ...

  2. uva 1292 树形dp

    UVA 1292 - Strategic game 守卫城市,城市由n个点和n-1条边组成的树,要求在点上安排士兵,守卫与点相连的边.问最少要安排多少士兵. 典型的树形dp.每一个点有两个状态: dp ...

  3. android CoordinatorLayout使用

    一.CoordinatorLayout有什么作用 CoordinatorLayout作为“super-powered FrameLayout”基本实现两个功能: 1.作为顶层布局 2.调度协调子布局 ...

  4. HDU 5444 Elven Postman 二叉排序树

    HDU 5444 题意:给你一棵树的先序遍历,中序遍历默认是1...n,然后q个查询,问根节点到该点的路径(题意挺难懂,还是我太傻逼) 思路:这他妈又是个大水题,可是我还是太傻逼.1000个点的树,居 ...

  5. 《Linux企业应用案例精解》一书已由清华大学出版社出版

    <Linux企业应用案例精解>简介 650) this.width=650;" border="0" alt="223754878.jpg" ...

  6. SQLServer2008端口及防火墙设置

    一,Microsoft SQL Server 2008R2数据库设置 1.       开始=>程序=>Microsoft SQL Server 2008R2=>配置工具=>S ...

  7. 紫书 例题 9-1 UVa 1025 ( DAG的动态规划）

    影响到状态的只有时间和在哪个车站(空间),所以可以设f[i][j]是时刻i的时候在第j个车站的最少等待时间 因为题目中的等待时间显然是在0时刻1车站,所以答案为f[0][1],那么就提醒我们从大推到小 ...

  8. hibernate : object references an unsaved transient instance 问题

    save顺序问题---比如学生表和班级表..学生表里有班级ID的外键.一对多的关系. 你save的时候应该先save班级,再save学生..否则学生的外键没有对应的值,引发异常

  9. Quartus II sof文件转 jic文件

    选择File->Convert Programming Files... Programming File Type选择JTAG Indirect ConfigurationFile(.jic) ...

  10. IsoAlgo3d - IDF/PCF pipeline 3d viewer

    IsoAlgo3d - IDF/PCF pipeline 3d viewer eryar@163.com Key Words. IDF, PCF, IsoAlgo, 3D 当前国际主流管道设计软件都可 ...