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. Qt 在圆形中贴图片

    void Widget::paintEvent(QPaintEvent *) { QPainter p(this); QPixmap pix(":/images/a.jpg"); ...

  2. 洛谷 P1071 潜伏者

    P1071 潜伏者 题目描述 R 国和 S 国正陷入战火之中,双方都互派间谍,潜入对方内部,伺机行动.历尽艰险后,潜伏于 S 国的 R 国间谍小 C 终于摸清了 S 国军用密码的编码规则: 1． S ...

  3. HDU 5373(2015多校7)-The shortest problem(模拟%11)

    题目地址:pid=5373">HDU 5373 题意:给你一个数n和操作次数t,每次操作将n的各位数之和求出来放在n的末尾形成新的n,问t次操作后得到的n能否够被11整除. 思路:就是 ...

  4. Units are seconds since 1970.

    在Android实际开发过程中常常会碰到以秒为单位的日期.这时能够依据须要将他们进行格式化处理,详细过程例如以下: long seconds=Long.parseLong("14058896 ...

  5. 试图切换控制addChildViewController、_transitionFromViewController

    试图切换能够用transitionFromViewController. 步骤: View Controller中能够加入多个sub view,在须要的时候显示出来: 能够通过viewControll ...

  6. 《JSP+Servlet+Tomcat应用开发从零開始学》

    当当网页面:  http://product.dangdang.com/23619990.html 内容简单介绍      本书全面介绍了 JSP开发中涉及的相关技术要点和实战技巧. 全书结构清晰,难 ...

  7. shrio int配置

    之前章节我们已经接触过一些INI配置规则了,如果大家使用过如Spring之类的IoC/DI容器的话,Shiro提供的INI配置也是非常类似的,即可以理解为是一个IoC/DI容器,但是区别在于它从一个根 ...

  8. 携手互联网企业10巨头设VC基金

    包括小米科技.盛大集团.人人网.掌趣科技.游族网络.龙图游戏.蓝港互动.37游戏.星辉互动娱乐.博雅互动等10家知名互联网企业作为出资人(LP)的优格创投基金近日正式成立. 众所周知,伴随着移动互联网 ...

  9. React开发实时聊天招聘工具 -第三章 React基础知识回顾

    function a (props) { return <h1>hello world{this.props.asd}</h1> } class a extends React ...

  10. 紫书 习题 10-17 UVa 11105 (筛法）

    类似于素数筛的思想去做,不然暴力会超时而且还要判重 #include<cstdio> #include<cstring> #include<vector> #def ...