幻灯片/轮播
兼容IE8高级jQuery轮播图插件
PetitQ
jSlider 是一款兼容 IE8 的高级 jQuery 轮播图插件。jSlider 轮播图插件的特点是轻量级，使用简单，跨平台。通过 jSlider 你可以非常容易的而在网页中实现任何轮播图效果。它的特点还有：
速度快，使用简单
也想出现在这里？联系我们吧
轻量级，压缩后的版本仅 3.6KB
支持 IE8+, Chrome, FireFox, Safari, Opera, Edge 浏览器
支持 iOS 和 Android 等移动设备
支持 5 种动画效果
使用方法
在页面中引入 jSlider.css 和 jQuery、jquery.jSlider.js 文件。
<link rel="stylesheet" type="text/css" href="assets/css/jSlider.css" />
<script type="text/javascript" src="assets/js/jquery-latest.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.jSlider.js"></script>
HTML 结构
轮播图的基本 HTML 结构如下：
<div id="slider1" class="jSlider" data-loop="true">
<div><img src="images/photo1.jpg" alt="" /></div>
<div><img src="images/photo2.jpg" alt="" /></div>
<div>
<img src="images/photo3.jpg" alt="" />
<div class="sub-content-sample">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div><img src="images/photo4.jpg" alt="" /></div>
<div><img src="images/photo5.jpg" alt="" /></div>
<div><img src="images/photo6.jpg" alt="" /></div>
</div>
如果需要在轮播图的某个项上制作动画元素，它的 HTML 结构如下：
<div id="slider1" class="jSlider" data-delay="0">
<div><img src="images/photo1.jpg" alt="" /></div>
<div class="selected">
<h3 class="appear-top">This is the slide title!</h3>
<h4 class="appear-right">This can be moved after the slide is showed...</h4>
<p class="appear-left">...in different directions...</p>
<p class="appear-bottom">...and with different animation effects</p>
<h5 class="appear-fade">powered by jSlider!</h5>
<img src="images/photo2.jpg" alt="" />
</div>
<div><img src="images/photo3.jpg" alt="" /></div>
<div><img src="images/photo4.jpg" alt="" /></div>
<div><img src="images/photo5.jpg" alt="" /></div>
<div><img src="images/photo6.jpg" alt="" /></div>
</div>
使用 DATA 属性
jSlider 的配置参数通过 data-*属性来控制。
<div id="slider1" class="jSlider" data-navigation="always" data-indicator="none">
可用的 data-*属性有：
data-navigation：控制是否显示前后导航按钮。值可以设置为"always", "none" 或 "hover"
data-indicator：控制是否显示圆点导航按钮。值可以设置为"always", "none" 或 "hover"
data-speed：控制轮播图的切换速度，单位毫秒。默认值为 500
data-delay：控制轮播图的播放速度，单位毫秒，默认值为 5000
data-transition：控制轮播图的动画过渡类型，值可以设置为"slide" 或 "fade"
data-loop：控制轮播图是否循环播放
data-group：该属性在 gallery 模式下使用。用于将图片进行分组
Github 地址：https://github.com/copthuy/jSlider
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
