<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
img {
display: block;
/* 清除图片底册 3像素缝隙*/
}
.slider {
width: 490px;
height: 170px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 5px;
position: relative;
}
.inner {
width: 100%;
height: 100%;
background-color: pink;
position: relative;
overflow: hidden;
}
.inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
.inner ul li {
float: left;
}
.slider ol {
position: absolute;
left: 50%;
/* margin-left: -80px;*/
bottom: 10px;
}
.slider ol li {
float: left;
width: 18px;
height: 18px;
background-color: #fff;
margin-right: 10px;
text-align: center;
line-height: 18px;
cursor: pointer;
}
.slider ol li.current {
background-color: orange;
}</style>
</head>
<body>
<div class="slider" id="slider">
<div class="inner">
<ul id="box">
<li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
</ul>
</div>
<ol id="bt">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
<script src="public.js"></script>
<script src="sport2.js"></script>
<script>
var index = 0;//控制图片和文字的对应关系
var timer = null;
var olist = $id("bt").children;
var oUl = $id("box");
timer = setInterval( autoPlay,2000 )
function autoPlay(){
index++;
for( var i = 0 ; i < olist.length ; i++ ){
olist[i].className = "";
}
if( index == olist.length ){
index = 0;
}
//当前index对应的olist高亮
olist[index].className = "current";
startMove( oUl , -index*490 , "left" );
}
//鼠标移入移出到文字上
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>