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:
<html>
<head> <meta charset="utf-8"> <title> 图片轮播演示 </title> <link rel="stylesheet" type="text/css" href="css/1.css"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> </head> <body> <div class="LunBo"> <ul> <li class="CurrentPic"> <img src="images/1.jpg" width="490" height="170"> </li> <li> <img src="images/2.jpg" width="490" height="170"> </li> <li> <img src="images/3.jpg" width="490" height="170"> </li> <li> <img src="images/4.jpg" width="490" height="170"> </li> <li> <img src="images/5.jpg" width="490" height="170"> </li> </ul> <div class="LunBoNum"> <span class="CurrentNum">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </div> <script type="text/javascript" language="javascript"> var PicTotal = 5; var CurrentIndex; var ToDisplayPicNumber = 0; $("div.LunBo div.LunBoNum span").click(DisplayPic); function DisplayPic() { // 当前页 CurrentIndex = $(this).index(); // 删除同级的类属性 $(this).parent().children().removeClass("CurrentNum") // 为当前元素添加类 $(this).addClass("CurrentNum"); // 隐藏全部图片 var Pic = $(this).parent().parent().children("ul"); $(Pic).children().hide(); // 显示指定图片 $(Pic).children("li").eq(CurrentIndex).show(); } function PicNumClick() { $("div.LunBo div.LunBoNum span").eq(ToDisplayPicNumber).trigger("click"); ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal; setTimeout("PicNumClick()",1000); } setTimeout("PicNumClick()",1000); </script> </body></html>