jSlides是一款效果非常炫酷的jQuery和CSS3交叉滑动幻灯片特效插件。该幻灯片特效不用任何外置的CSS代码,可以制作出带缩略图的交叉滑动显示图片的幻灯片效果。
使用方法
使用该幻灯片插件需要在页面中引入jquery和jSlides.js文件。
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="src/jSlides.js"></script>
HTML结构
该幻灯片的HTML结构非常简单,使用一个<div>
容器来包裹需要显示的图片。
<div class="slider"> <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> <img src="img/4.jpg"> </div>
初始化插件
在页面DOM元素加载完毕之后,可以通过jSlides()
方法来初始化该幻灯片插件。
$('.slider').jSlides({ img1: {h2:'Slide 1', h3:'I am slide 1'}, img2: {h2:'Slide 2', h3:'I am slide 2'}, img3: {h2:'Slide 3', h3:'I am slide 3'}, img4: {h2:'Slide 4', h3:'I am slide 4'}, img5: {h2:'Slide 5', h3:'I am slide 5'}, });
其中,可以为每一张图片通过对象的方式传入标题和描述文本。
配置参数
该幻灯片可用的配置参数有:
-
autoplay
:是否自动播放。默认为false。 -
time
:过渡动画的时间,单位毫秒,默认为3000。 -
width
:幻灯片的宽度,默认为1280像素。 -
height
:幻灯片的高度,默认为500像素。
$('.slider').jSlides({ img1: {h2:'Slide 1', h3:'I am slide 1'}, img2: {h2:'Slide 2', h3:'I am slide 2'}, img3: {h2:'Slide 3', h3:'I am slide 3'}, img4: {h2:'Slide 4', h3:'I am slide 4'}, img5: {h2:'Slide 5', h3:'I am slide 5'}, autoplay: true, time: 3000, width: 1280, height: 500 });
jSlides幻灯片插件的github地址为:https://github.com/txn513/jSlides
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!