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. 网络编程select函数

    select函数的作用: 在编程的过程中,经常会遇到许多阻塞的函数,好像read和网络编程时使用的recv, recvfrom函数都是阻塞的函数,当函数不能成功执行的时候,程序就会一直阻塞在这里,无法 ...

  2. HTML学习----------DAY1 第一节

    什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...

  3. ubuntu12.04更新软件源时出现校验和不符

    在运行update命令之后.出现系统校验和不符.网上找了一些方法,最后在大神的帮助下最终攻克了! ! 1.更改 /etc/apt/apt.conf.d/00aptitude 文件,在最后一行增加: A ...

  4. css3中rem和em是干嘛的

    css3中rem和em是干嘛的 一.总结 一句话总结:对rem综合评价是用来做web app它绝对是最合适的人选之一. 这里我特别强调web app,web page就不能使用rem吗,其实也当然可以 ...

  5. html 笔记2

    .css重用 <style> 如果整个页面的宽度 > 900px时: { .c{ 共有 } .c1{ 独有 } } .c2{ 独有 } </style> <div ...

  6. VC眼中的众筹平台：将改变VC募集基金方式，成为下一个纳斯达克市场

    “一个好的投资平台可能会成为像纳斯达克一样的市场”,这是投资人给予众筹平台的未来憧憬. ”从长远的角度来说,众筹平台可能会改变VC募集基金的方式“,戈壁投资合伙人蒋涛说,“从二级市场看,不论是企业的I ...

  7. CetnOS6 网络配置，主机名配置

    CetnOS6 网络配置,主机名配置 一.通过命令ifconfig -a 查看可用网络设备 二.通过网络配置文件/etc/sysconfig/network-scripts/ifcfg-eth0 配置 ...

  8. javaScript call与apply学习笔记

    call和apply是借用他人的函数实现自己到功能,具体表现在改变this指向,借用他人方法 而不同的地方是call是把实参按照形参的个数传入,而apply传入的是一个数组(argument) 写一个 ...

  9. tcpg通信

    1.客户端 from socket import * def main(): # 创建套接字 tcp_socket = socket(AF_INET,SOCK_STREAM) # 链接服务端 ip = ...

  10. 洛谷 P2690 接苹果

    P2690 接苹果 题目背景 USACO 题目描述 很少有人知道奶牛爱吃苹果.农夫约翰的农场上有两棵苹果树(编号为1和2), 每一棵树上都长满了苹果.奶牛贝茜无法摘下树上的苹果,所以她只能等待苹果 从 ...