<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{padding:0;margin:0;}
li{list-style:none;}
div{height:200px;width:470px;position:relative;margin:100px auto;}
span,p{height:25px;background:#000;text-align:center;line-height:25px;color:#fff;display:block;}
img{display:block;height:150px;}
ul{position:absolute;top:-60px;left:30px;}
li{width:50px;height:50px;background:#333;margin-left:10px;float:left;}
.red{background:red;}
</style>
<script>
window.onload=function() {
var oDiv=document.getElementById('div1');
var oSpan=oDiv.getElementsByTagName('span')[0];
var oImg=oDiv.getElementsByTagName('img')[0];
var oP=oDiv.getElementsByTagName('p')[0];
var oUl=oDiv.getElementsByTagName('ul')[0];
var oLi=oDiv.getElementsByTagName('li');
var arr1=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];
var arr2=['图片一','图片二','图片三','图片四','图片五'];
var num=0;
var old=null;
var tim=null;
for(var i=0;i<arr1.length;i++){
oUl.innerHTML+='<li></li>';
}
function xx(){
oSpan.innerHTML=1+num+'/'+arr1.length;
oImg.src=arr1[num];
oP.innerHTML=arr2[num];
for(var i=0;i<oLi.length;i++){
oLi[i].className = '';
}
oLi[num].className = 'red';
}
xx();
for(var i=0;i<oLi.length;i++){
oLi[i].index=i;
oLi[i].onclick=function(){
num=this.index;
xx();
/* old.style.background='';
old=this;
this.style.background='red';*/
}
}
function setIn(){
tim=setInterval (function(){
num++;
num%=arr1.length;
xx();
},1000)}
setIn()
oDiv.onmouseover=function(){
clearInterval(tim);
};
oDiv.onmouseout=setIn;
}
</script>
<div id="div1">
<span>数量正在加载</span>
<img src="">
<p>图片信息正在加载</p>
<ul>
</ul>
</div>
<body>
</body>
</html>