<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<style>
body,div,ul,li,a,img{margin: 0;padding: 0;}
ul,li{list-style: none;}
#banner{width: 50em;height: 23em;position: absolute;left: 18em;margin: 10px auto;overflow: hidden;}
.imglist{width: 250em;position: absolute;}
#banner img{width: 50em;height:23em;float: left;}
.infolist{position: absolute;bottom: 1em;left: 20em;}
.infolist li{width: 10px;height: 10px;border-radius: 5px;background: white;float: left;margin-left: 1em;cursor: pointer;}
.infolist .cur{background: red;}
</style>
</head>
<body>
<div id="banner">
<ul class="imglist">
<li><a href=""><img src="./image/img1.jpg" alt=""></a></li>
<li><a href=""><img src="./image/img2.jpg" alt=""></a></li>
<li><a href=""><img src="./image/img1.jpg" alt=""></a></li>
<li><a href=""><img src="./image/img3.jpg" alt=""></a></li>
<li><a href=""><img src="./image/img2.jpg" alt=""></a></li>
</ul>
<ul class="infolist">
<li class="cur"></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
</ul>
</div>
<script>
var banner=document.getElementById('banner');
var uls=document.getElementsByTagName('ul');
var imgs=uls[0].getElementsByTagName('li');
var btn=uls[1].getElementsByTagName('li');
var i=index=0;
var play=null;
console.log(uls,imgs,btn);
/*window.onload=function(){
uls[0].style.left=-100+'em';
}
*/
function show(a){//将按钮与图片关联
for(i=0;i<btn.length;i++){
btn[i].className="";
btn[a].className="cur";
}
for(i=0;i<imgs.length;i++){
uls[0].style.left=-a*50+'em';
}
//console.log(a);
}
for(i=0;i<btn.length;i++){//鼠标事件
btn[i].index=i;
btn[i].onmouseover=function(){
show(this.index);
}
}
function autoplay(){//自动播放方法
play=setInterval(function(){
index++;
index>=btn.length&&(index=0);
show(index);
},2500);
}
autoplay();
banner.onmouseover=function(){//鼠标移入事件
clearInterval(play);
};
btn.onmouseover=function(){
clearInterval(play);
};
banner.onmouseout=function(){//鼠标移出事件
autoplay();
};
</script>
</body>
</html>
btn[i].onmouseover触发后btn[i].index如何传到自动播放方法的index里？
