转载

jQuery和CSS3交叉滑动幻灯片特效插件

简要教程

jSlides是一款效果非常炫酷的jQuery和CSS3交叉滑动幻灯片特效插件。该幻灯片特效不用任何外置的CSS代码,可以制作出带缩略图的交叉滑动显示图片的幻灯片效果。

jQuery和CSS3交叉滑动幻灯片特效插件

查看演示        下载插件

使用方法

使用该幻灯片插件需要在页面中引入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

来源:jQuery之家

原文  http://www.html5cn.org/article-9499-1.html
正文到此结束
Loading...