js图片轮播

浏览数：45 / 时间：2015年06月09日

<html>
<head>
<meta charset="utf-8"/>
<title>图片滚动</title>
<style>
*{margin:0px;padding:0px;font-size:14px;}
.tpLunbo{position:relative;list-style-type:none;height:240px;width:922px;}
.tpLunbo ul li{position:absolute;heiht:240px;withd:922px;left:0px;top:0px;display:none;}
.LunBo ul li.CurrentPic { display: block;}
.tpLunbo img{width:922px;;height:240px;}
.lunboPage {position: absolute;right:1px;bottom:1px;width: 50px;text-align:right;background-color: #006058;padding-left:10px;float:right;}
.lunboPage span {height: 15px;width: 10px;display: block;line-height: 20px;text-align: center;margin-top: 5px;margin-bottom: 5px;float: left;cursor:pointer;}
.CurrentPage { background-color: #009991;}
</style>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="tpLunbo">
<ul>
<li class="CurrentPic"><img src="1.jpg"/></li>
<li><img src="2.jpg"/></li>
<li><img src="3.jpg"/></li>
</ul>
<div class="lunboPage">
<span class="CurrentPage">1</span>
<span>2</span>
<span>3</span>
</div>
</div>
</body>
<script type="text/javascript" language="javascript">
var PicTotal = 5;
var CurrentIndex;
var ToDisplayPicNumber = 0;
$(".lunboPage span").click(DisplayPic);
function DisplayPic() {
CurrentIndex = $(this).index();// 测试是父亲的第几个儿子
$(this).parent().children().removeClass("CurrentPage")// 删除所有同级兄弟的类属性
$(this).addClass("CurrentPage");// 为当前元素添加类
var Pic = $(this).parent().parent().children("ul");
$(Pic).children().hide();// 隐藏全部图片
$(Pic).children("li").eq(CurrentIndex).show();// 显示指定图片
}
function PicNumClick() {
$(".lunboPage span").eq(ToDisplayPicNumber).trigger("click");
ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;
setTimeout("PicNumClick()",1000);
}
setTimeout("PicNumClick()",1000);
</script>
</html>