jquery幻灯片轮播效果

 查看演示  website  立即下载

使用方法

下面是一些基本参数

使用方法是很简单的，首先引入需要的文件

<link rel="stylesheet" href="css/jquery.carousel.css"/>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/jquery.carousel.js"></script>

然后编写HTML文件，创建一个div，类名为carousel content-main，在div里面创建一个列表ul，类名为list，ul标签里面放入li标签，li标签里面放入img，如下所示：

<div id="test1" class="carousel content-main">
    <ul class="list">
        <li><img src="img/photo_1.jpg"/></li>
        <li><img src="img/photo_2.jpg"/></li>
        <li><img src="img/photo_3.jpg"/></li>
        <li><img src="img/photo_4.jpg"/></li>
        <li><img src="img/photo_5.jpg"/></li>
    </ul>
</div>

然后在js里面初始化幻灯片就可以了，方法如下：

Carousel.init($(".carousel"));

这样一个幻灯片就完成了，因为demo中的图片大小和默认的参数是一样的，所以这里就没有设置。为了安全起见这里的四个参数一定要设置一下，分别是幻灯片的高、宽，第一帧也就是第一张图片的高、宽。设置方法如下：

$(".carousel").attr("data-setting",'{ "width":900,"height":411,"postWidth":658,"postHeight":658}')

这里是在js中设置的，当然你也可以在div标签中设置，方法如下：

<div class="carousel content-main" data-setting = '{ "width":900,"height":411,"postWidth":658,"postHeight":658}'>
    ...
</div>

注意设置的属性方式一定要是JSON数据，即所有的属性(除数字外)都要加上双引号。如果一张页面中要设置多个幻灯片的话，只要分别设置每个div的参数就可以了，只用初始化一次。

PREVIOUS:
NEXT:
js音频可视化插件Wavesurfer.js
jQuery世界地区三级联动