<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,ol{ list-style: none;}
.wrapper{
670px;
height: 240px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
ul{
position:relative;
}
ul li{
position:absolute;
top:0;
left:0;
}
ol{
position: absolute;
right: 0;
bottom: 10px;
190px;
}
ol li{
float: left;
20px;
height: 20px;
margin: 0 5px;
text-align: center;
border-radius: 50%;
cursor: default;
background-color: #abc;
}
ol li.current{
background-color: pink;
}
</style>
</head>
<body>
<div class="wrapper">
<ul id="box">
<li style="z-index: 6;"><img src="1.jpg" alt=""/></li>
<li style="z-index: 5;"><img src="2.jpg" alt=""/></li>
<li style="z-index: 4;"><img src="3.jpg" alt=""/></li>
<li style="z-index: 3;"><img src="4.jpg" alt=""/></li>
<li style="z-index: 2;"><img src="5.jpg" alt=""/></li>
<li style="z-index: 1;"><img src="6.jpg" alt=""/></li>
</ul>
<ol style="z-index: 10;" id="uu">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</div>
</body>
</html>
<script src="sport2.js"></script>
<script src="public.js"></script>
<script type="text/javascript">
var index = 0;
var timer = null;
var ulist = $id("box").children;
var olist = $id("uu").children;
timer = setInterval( autoPlay , 2000 );
function autoPlay(){
index++;
for( var i = 0 ; i < olist.length ; i++ ){
olist[i].className = "";
//全部隐藏
startMove( ulist[i] , 0 , "opacity" );
}
if( index == olist.length ){
index = 0;
}
olist[index].className = "current";
//显示当前
startMove( ulist[index] , 100 , "opacity" );
}
//鼠标移入移出到文字上
for( let i = 0 ; i < olist.length ; i++ ){
olist[i].onmouseover = function(){
clearInterval( timer );
index = i-1;
autoPlay();
}
olist[i].onmouseout = function(){
timer = setInterval( autoPlay,2000 );
}
}
</script>