使用jQuery制作图片轮播效果

本文旨在引导大家自已动手书写图片轮播效果，通过使用jQuery来制作图片轮播效果是多么的简单，而不必书写大量js代码。

跟我来吧！

在DW中插入一个图片，然后回车

重复步骤1直到所有图片添加完成

选择所有图片，格式菜单－〉列表－〉项目列表，制作一个图片列表

然后再插入一个div，id命名为“LunBoNum”，在div内写入代码如下：

1

2

3

4

5

插入一个新id为“LunBo”的div，并包含如上全部内容，代码如下：

在网页的代码间加入jQuery框架链接

编写JS代码如下

链接CSS文件，文件内容如下

* {

margin: 0px;

padding: 0px;

font-size: 14px;

}

div.LunBo {

position: relative;

list-style-type: none;

height: 170px;

width: 490px;

}

div.LunBo ul li {

position: absolute;

height: 170px;

width: 490px;

left: 0px;

top: 0px;

display: none;

}

div.LunBo ul li.CurrentPic {

display: block;

}

div.LunBo div.LunBoNum {

position: absolute;

left: 374px;

bottom: 11px;

width: 83px;

text-align: right;

background-color: #999;

padding-left: 10px;

}

div.LunBo div.LunBoNum span {

height: 20px;

width: 15px;

display: block;

line-height: 20px;

text-align: center;

margin-top: 5px;

margin-bottom: 5px;

float: left;

cursor: pointer;

}

div.LunBo div.LunBoNum span.CurrentNum {

background-color: #3F6;

}

制作完成，保存浏览效果如下

最后附上全部代码

以上代码保存为html文件后可直接运行。

以上代码中不包含应用到的图片，使用自己的图片测试时，请自行修改CSS中的相应宽度及高度设置。

其它问题，请与本人QQ联系：869717151