lightSlider 好图片轮播插件 支持移动端
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 好图片轮播插件 支持移动端的更多相关文章
- 面板支持单个，多个元素的jQuery图片轮播插件
一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- 图片轮播插件-carouFredSel
carouFredSel图片轮播插件基于Jquery,比较常规的轮播插件,支持滚轮及键盘左右按键,加入其它插件可实现更加复杂的特效. 主页地址:http://caroufredsel.dev7stud ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 图片轮播插件Nivo Slider
推荐:图片轮播插件Nivo Slider 因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是, ...
- AdPlayBanner：功能丰富、一键式使用的图片轮播插件
AdPlayBanner:功能丰富.一键式使用的图片轮播插件 AdPlayBanner是一个Android平台基于ViewPager实现的轮播图插件,主要用以自动或者手动地播放轮播图,提供了Fresc ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
随机推荐
- Java基础学习总结（21）——数组
一．数组的基本概念 数组可以看成是多个相同类型数据组合,对这些数据的统一管理. 数组变量属引用类型,数组也可以看成是对象,数组中的每个元素相当于该对象的成员变量. 数组的元素可以是任何数据类型,包括基 ...
- KVM硬件辅助虚拟化之 EPT in Nested Virtualization
在嵌套虚拟环境(Nested Virtualization)下,执行在hypervisor上的Virtual Machine仍能够作为hypervisor去执行其他的Virutal Machine,而 ...
- 一些牛人的IOS博客，mark下慢慢学习
http://blog.devtang.com/ 唐巧的个人blog http://gracelancy.com/ Lancy's blog http://b ...
- UI_UISegmentedControl 控件
创建控件 - (void)createSegmentControl { UISegmentedControl *segmentedControl = [[UISegmentedControl allo ...
- 使用ssh过程中对数据库进行update时报错
报错信息:org.springframework.dao.InvalidDataAccessApiUsageException: Write operations are not allowed in ...
- JNI 实战全面解析
项目决定移植一款C++开源项目到Android平台,开始对JNI深入研究. JNI是什么? JNI(JavaNative Interface)意为Java本地调用,它允许Java代码和其他语言写的代码 ...
- 比较两个文件是否相同（C/C++语言）
#include <stdio.h> #include <string.h> ; // Calculate the file size void Get_file_size(c ...
- Xamarin大佬的地址
https://www.cnblogs.com/hlx-blogs/p/7266098.html http://www.cnblogs.com/GuZhenYin/p/6971069.html
- 为什么选择Sqoop1
1)大部分企业还在使用sqoop1版本 2)sqoop1能满足公司的基本需求 3)sqoop2 功能还不是很成熟和完善 4)sqoop只是一个工具而已,相对比较简单
- BFS（广度优先搜索）
Catch That Cow Farmer John has been informed of the location of a fugitive cow and wants to catch he ...