<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#banner{
width: 520px;
height: 280px;
margin: 0 auto;
margin-top: 50px;
position: relative;
overflow: hidden;
}
#datu{
position: absolute;
top: 0;
left: -520px;
width: 3640px;
overflow: hidden;
}
#datu>li{
float: left;
}
ul{
list-style: none;
}
.dian{
position: absolute;
left: 220px;
bottom: 10px;
z-index: 2;
}
.dian li{
float: left;
width: 10px;
height: 10px;
background-color: #B7B7B7;
border-radius: 5px;
text-align: center;
line-height: 20px;
margin: 0px 3px;
cursor: pointer;
}
.left{
font-size: 14px;
width: 18px;
padding: 3px;
height: 50px;
background-color: gray;
opacity: 0.7;
position: absolute;
left: 0;
top:120px;
z-index: 4;
color: white;
line-height: 50px;
display: none;
cursor: pointer;
}
.right{
font-size: 14px;
width: 18px;
padding: 3px;
height: 50px;
background-color: gray;
opacity: 0.7;
position: absolute;
right: 0;
top:120px;
z-index: 4;
color: white;
line-height: 50px;
display: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="banner">
<ul id="datu">
<li><a href="javascript:void(0)"><img src="img/5.png" alt="" /></a></li>
<li><a href="javascript:void(0)"><img src="img/1.jpg" alt="" /></a></li>
<li><a href="javascript:void(0)"><img src="img/2.jpg" alt="" /></a></li>
<li><a href="javascript:void(0)"><img src="img/3.jpg" alt="" /></a></li>
<li><a href="javascript:void(0)"><img src="img/4.jpg" alt="" /></a></li>
<li><a href="javascript:void(0)"><img src="img/5.png" alt="" /></a></li>
<li><a href="javascript:void(0)"><img src="img/1.jpg" alt="" /></a></li>
</ul>
<div class="left"><</div>
<div class="right">></div>
<ul class = "dian">
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
</ul>
</div>
<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var oBanner = document.getElementById("banner");
var aImgs = document.querySelectorAll(".datu>li");
var oDatu = document.querySelector("#datu");
var aDians = document.querySelectorAll(".dian>li")
timer = null;
var index = 0;
function ziDong(){
clearInterval(timer);
timer = setInterval(function(){
index++;
if (index == 0) {
index = 5;
oDatu.style.left = -520*5 + "px";
aDians[4].style.backgroundColor = "#FF4400";
}
if (index == 7) {
index = 1;
oDatu.style.left = -520 + "px";
}
startMove(oDatu,{left:-520*index});
for (var n = 0;n<aDians.length;n++) {
aDians[n].style.backgroundColor = "";
}
if (index == 6) {
aDians[0].style.backgroundColor ="#FF4400";
}
aDians[index - 1].style.backgroundColor = "#FF4400";
},1000)
}
ziDong();
//下标点击事件
for (var i = 0; i < aDians.length;i++) {
aDians[i].index = i;
// clearInterval(timer);
aDians[i].onclick =function(){
index = this.index;
ziDong();
for (var n = 0;n<aDians.length;n++) {
aDians[n].style.backgroundColor = "";
}
this.style.backgroundColor = "#C91624";
startMove(oDatu,{left:-520* (this.index + 1)})
}
}
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
