基于jquery的幻灯片插件
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
img
js 修改自动播放代码 Dec 30, 2016
lib 压缩后的插件和更新说明文档 Dec 20, 2016
README.md
index.html 修改自动播放代码 Dec 30, 2016

README.md

这是一个基于jquery的幻灯片插件


您可以点击这里查看示例

这是一张所有值都是默认值的截图

默认截图

下面是一些基本参数

属性列表 说明 默认值
width 幻灯片宽度 900
height 幻灯片高度 411
postWidth 第一帧的宽度 658
postHeight 第一帧的高度 411
scale 每一帧的缩放比例 0.8
speed 幻灯片跳转的速度 500
verticalAlign 布局方式(top:上、middle:中、bottom:下) middle
autoPlay 是否自动播放 false
delay 幻灯片自动播放的间隔时间 1000

使用方法

下载插件,lib文件中的css和js

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

<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的参数就可以了,只用初始化一次。