实现思路:
一:布局部分:
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业务逻辑部分
获取到所有需要操作的对象。