兼容IE8的高级jQuery轮播图插件
源码介绍
jSlider是一款兼容IE8的高级jQuery轮播图插件。jSlider轮播图插件的特点是轻量级,使用简单,跨平台。通过jSlider你可以非常容易的而在网页中实现任何轮播图效果。它的特点还有: 在页面中引入jSlider.css和jQuery、jquery.jSlider.js文件。 轮播图的基本HTML结构如下: 如果需要在轮播图的某个项上制作动画元素,它的HTML结构如下: jSlider的配置参数通过 可用的 jSlider兼容IE8的高级jQuery轮播图插件的github地址为:https://github.com/copthuy/jSlider简要教程
使用方法
<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结构
<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>
<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属性
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模式下使用。用于将图片进行分组。
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 兼容IE8的高级jQuery轮播图插件
发表评论 取消回复