实现思路：
一：布局部分：
1.采用div>ul>li>img布局，来显示轮播的图片banner;
2.采用div>ul>li>a标签，来显示小红点；
整个布局如下图所示：图中的第一个li和最后一个li标签是用来做动画过渡时使用，就不会产生空白抖动的情况，这两个图，暂时称之为“站位图”
二:JS代码部分
1.先处理好左右（上一张，下一张）两个按钮的点击事件，点击之后，能够正常的切换当前的图片；
2.在图片切换之后，控制相对应的圆点标签，高亮显示当前图片对应的圆点；
3.在1后的切换图片里面添加动画效果；
4.开启轮播定时器，每隔两秒执行一次，调用下一张按钮的onclick;
5.如果当前轮播定时器或者动画效果定时器正在执行，点击了“下一张按钮”，会产生时间冲突，所以在，每次点击“下一张/上一张按钮”的时候，清除掉所有的动画，并且让当前索引的图片完整的（占满整个屏幕），显示在界面上。
6.给圆点标签，添加onmouseover和out事件。
实现部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div id="wrapper">
<div id="imgs">
<ul>
<li><a href=""><img src="../image/4.jpg" alt="" /></a></li>
<li><a href=""><img src="../image/1.jpg" alt="" /></a></li>
<li><a href=""><img src="../image/2.jpg" alt="" /></a></li>
<li><a href=""><img src="../image/3.jpg" alt="" /></a></li>
<li><a href=""><img src="../image/4.jpg" alt="" /></a></li>
<li><a href=""><img src="../image/1.jpg" alt="" /></a></li>
</ul>
</div>
<div class="clear"></div>
<div id="nav">
<ul>
<li><a class="current">1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
</div>
<div id="preous"></div>
<div id="next"></div>
</div>
</body>
</html>在静态页面中，需要注意：
1.给图片轮播的ul外层的div标签，设置为一张图片的宽度，并且设置溢出的不显示。
2.给图片轮播的ul标签的宽度必须为li标签的总数*每张的宽度。
3.圆点标签的div,设置的z-index必须比图片轮播的div优先级要高。
二.JS业务逻辑部分
获取到所有需要操作的对象。
2696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
