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>

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. Hadoop RPC框架

    1.RPC框架概述 1.1 RPC(Remote Procedure Call Protocol)--远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不须要了解底层网络技术的协议. R ...

  2. hdoj--2955--Robberies(背包好题)

    Robberies Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  3. Process Monitor —— 程序（文件和注册表）监控

    下载地址:Process Monitor v3.33 通过追踪 Process Monitor 的日志,我们可以确认某程序的行为:

  4. hbase启动报错:Java HotSpot(TM) 64-Bit Server VM warning: ignoring option PermSize=128m; support was removed in 8.0

    输入HBASE_MASTER_OPTS只是为了快速寻找这个选项而已,如果你手工找也可以 刚才那个命令回车后直接跳到这 前面加#就好了 修改后保存.重新启动hbase就好了. 注意:各个节点都要修改哦. ...

  5. 清空/var/adm/wtmp 文件内容

    清/var/adm/wtmp 文件内容 用于显示登录系统和重启机器的情况 /var/adm/wtmp文件过大. 可用du -sm /var/adm/wtmp查看 cat /dev/null>/v ...

  6. SQL传数组到存储过程中

    方法一 CREATE PROC D_t_Base_Employee @str varchar(100) as declare @sql varchar(1000) set @sql='DELETE E ...

  7. 新浪新闻按keyword抓取实例

    import urllib2 import requests #import MySQLdb import webbrowser import string import re from Beauti ...

  8. cgroups

    CGROUPS官方解析,用户空间怎样监控 http://blog.chinaunix.net/uid-16763274-id-2103750.html cgroups概念 fr=aladdin&quo ...

  9. BZOJ 3671 NOI 2014 随机数生成器 贪心

    题目大意:实在是太难说明了,自己看pdf吧.. 思路:优先依照它说明的方法处理数组,然后为了让数列中尽可能多的出现小的数字,所以1是必需要出现的,这样才干使整个数列的排序后字典序最小. 我们思考,假设 ...

  10. 下载eclipse详细步骤

    先登陆eclipse的官网 然后点击红色箭头进行选择你电脑是32还是64位的 根据自己的需求下载 然后点击下载 这里下载的是安装包,你要进行压缩.安装时一定要好相应的jdk要不然就会报错 这上面的错误 ...