标签：
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>
标签：
原文地址：http://my.oschina.net/u/2274056/blog/373872
