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. MySQL日志设置及查看方法

    MySQL有以下几种日志: 错误日志: -log-err 查询日志: -log 慢查询日志: -log-slow-queries 更新日志: -log-update 二进制日志: -log-bin 默 ...

  2. python main函数

    关于Python的主(main)函数问题 2007-07-23 19:14 初次接触Python的人会很不习惯Python没有main主函数.这里简单的介绍一下,在Python中使用main函数的方法 ...

  3. HTML学习----------DAY2第四节

    HTML 文档是由 HTML 元素定义的. HTML 元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 注释:开始标签常被称为开放标签(opening ...

  4. ArcGIS api for javascript——地理编码任务-地理编码地址

    描述 本例允许用户输入一个地址,然后显示匹配的地址的位置.这通常地被称为地理编码.在ArcGIS JavaScript API中,使用Locator类执行地理编码. 定位器构造函数需要ArcGIS S ...

  5. iOS 画圆形头像

    demo下载地址:http://pan.baidu.com/s/1mgBf6YG _logoImageView.image = [self getEllipseImageWithImage:[UIIm ...

  6. LeetCode_Construct Binary Tree from Inorder and Postorder Traversal

    一.题目 Construct Binary Tree from Inorder and Postorder Traversal My Submissions Given inorder and pos ...

  7. unix mkdir命令的使用方法

    [语法]:   mkdir [-m 模式] [-p]  文件夹名 [说明]:  本命令用于建立文件夹,文件夹的存取模式由掩码(umask)决定,要求对其父文件夹具有写权限,文件夹的UID和GID为实际 ...

  8. Highcharts图表插件的简单使用说明

    Highcharts图表控件是眼下使用最为广泛的图表控件.本文将从零開始逐步为你介绍Highcharts图表控件. 通过本文.你将学会怎样配置Highcharts以及动态生成Highchart图表. ...

  9. HDU 5358 First One 数学+尺取法

    多校的题,摆明了数学题,但是没想出来,蠢爆了,之前算了半天的s[i][j]的和,其实是积.其实比赛的时候我连log(s[i][j])+1是s[i][j]的位数都没看出来,说出来都丢人. 知道了这个之后 ...

  10. Linux桌面词典 GoldenDict词典

    GoldenDict 是一款不错的.与StarDict(星际译王)类似的词典软件.它使用 WebKit作为渲染核心,格式化.颜色.图像.链接等支持一应俱全:支持多种词典文件格式,包括Babylon的 ...