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. 题解 P3374 【【模板】树状数组 1】

    恩,这是AC的第一道树状数组呢. 本蒟蒻以前遇到RMQ问题一般都用线段树或ST表,可惜ST表不支持在线修改,而线段树代码量又太大. 如今终于找到了折中方案:树状数组!!!!代码量小,还支持修改! 树状 ...

  2. 【转】C#中RSA加密解密和签名与验证的实现

    [转]C#中RSA加密解密和签名与验证的实现 RSA加密算法是一种非对称加密算法.在公钥加密标准和电子商业中RSA被广泛使用.RSA是1977年由罗纳德•李维斯特(Ron Rivest).阿迪•萨莫尔 ...

  3. POJ——T 3728 The merchant

    http://poj.org/problem?id=3728 Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 5068   A ...

  4. UMeditor百度富文本编辑器的使用

    批量上传的图片在线管理没法查看图片 是因为jar包本身的Bug,这里暂时做了个替换展示.就是找到Img.js  然后搜索 img.set 替换下就好了 var url=list[i].url ;    ...

  5. Connect the Campus (Uva 10397 Prim || Kruskal + 并查集)

    题意:给出n个点的坐标,要把n个点连通,使得总距离最小,可是有m对点已经连接,输入m,和m组a和b,表示a和b两点已经连接. 思路:两种做法.(1)用prim算法时,输入a,b.令mp[a][b]=0 ...

  6. 基于matlab的音频波形实时採集显示 v0.1

    robj = audiorecorder(44100,16,1); %设置採样频率.採样位数.通道数 recordblocking(robj,1); %採集初步数据(1s长度) rdata = get ...

  7. vue2.0-transition多个元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. VGA接口时序约束

    SF-VGA模块板载VGA显示器DA转换驱动芯片AVD7123,FPGA通过OUPLLN连接器驱动ADV7123芯片产生供给VGA显示器的色彩以及同步信号.SF-CY3核心模块与SF-VGA子模块连接 ...

  9. 直播聊天室,点亮效果,jquery实现

    1.css #like_area img{ width: 30px; height: 30px; position: absolute; bottom: 100px; left: 60%; margi ...

  10. spring mvc获取路径参数的几种方式

    一.从视图向controller传递值,  controller <--- 视图 1.通过@PathVariabl注解获取路径中传递参数 (参数会被复制到路径变量) @RequestMappin ...