做个实例，js中发现了些问题！当我点击图中两侧的向左向右按钮后，再onmouseover触发图下的小点时，对应的图片不一致了，onmouseout后又正常了。
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
*{
padding:0;
margin:0;
}
a{
text-decoration:none;
}
li{
list-style:none;
}
img{
border:0;
}
#scrollAdvWrap{
width:340px;
height:240px;
overflow:hidden;
border:1px solid #000;
margin:0 auto;
position:relative;
}
#adv{
position:absolute;
top:0;
left:0;
}
#adv li{
float:left;
}
#adv img{
width:340px;
height:240px;
vertical-align:top;
}
#prev,#next{
position:absolute;
width:30px;
height:40px;
top:100px;
z-index:1;
opacity:0.5;
filter:alpha(opacity=50);
}
#prev{
left:0;
background:url(images/news_arr_l.png);
}
#next{
right:0;
background:url(images/news_arr_r.png);
}
#dotBtn{
position:absolute;
bottom:10px;
left:50%;
transform:translate(-50%,0);
-webkit-transform:translate(-50%,0);
-moz-transform:translate(-50%,0);
-o-transform:translate(-50%,0);
-ms-transform:translate(-50%,0);
}
#dotBtn li{
float:left;
width:10px;
height:10px;
background:silver;
cursor:pointer;
margin:0 4px;
}
#dotBtn .active{
background:red;
}
</style>
<script>
window.$=HTMLElement.prototype.$=function(selector){
return (this==window?document:this).querySelectorAll(selector);
}
window.onload=function(){
app.tabAdv();
}
var app={};
app.tabAdv=function(){
var lBtn=$("#prev")[0];
var rBtn=$("#next")[0];
var oUl=$("#adv")[0];
var oLi=oUl.$("li");
var oImg=oUl.$("img");
var dot=$("#dotBtn")[0];
var dotLi=dot.$("li");
var oneWidth=oLi[0].offsetWidth;
var arr=[];
var dotArr=[];
var timer=null;
function getWidth(){
var widths=oneWidth*oLi.length;
oUl.style.width=widths+"px";
}
getWidth();
for(var i=0;i<oLi.length;i++){
var image=oLi[i].getElementsByTagName("img")[0];
var imgSrc=image.src;
arr.push(imgSrc);
}
console.log(arr);
for(var i=0;i<dotLi.length;i++){
dotArr.push(dotLi[i].className);
}
console.log(dotArr);
timer=setInterval(toNext,3000);
for(var i=0;i<oLi.length;i++){
oLi[i].onmouseover=dotLi[i].onmouseover=lBtn.onmouseover=rBtn.onmouseover=function(){
clearInterval(timer);
}
oLi[i].onmouseout=dotLi[i].onmouseout=lBtn.onmouseout=rBtn.onmouseout=function(){
timer=setInterval(toNext,3000);
}
}
lBtn.onmouseover=rBtn.onmouseover=function(){
clearInterval(timer);
this.style.opacity=1;
this.style.filter="alpha(opacity=100)";
}
lBtn.onmouseout=rBtn.onmouseout=function(){
timer=setInterval(toNext,3000);
this.style.opacity=0.5;
this.style.filter="alpha(opacity=50)";
}
lBtn.addEventListener("click",toPrev);
rBtn.addEventListener("click",toNext);
function toPrev(){
arr.unshift(arr[arr.length-1]);
arr.pop();
dotArr.push(dotArr[0]);
dotArr.shift();
for(var i=0;i<oImg.length;i++){
oImg[i].src=arr[i];
}
for(var i=0;i<dotLi.length;i++){
dotLi[i].className=dotArr[i];
}
}
function toNext(){
arr.push(arr[0]);
arr.shift();
dotArr.unshift(dotArr[dotArr.length-1]);
dotArr.pop();
for(var i=0;i<oImg.length;i++){
oImg[i].src=arr[i];
}
for(var i=0;i<dotLi.length;i++){
dotLi[i].className=dotArr[i];
}
}
for(var i=0;i<dotLi.length;i++){
dotLi[i].index=i;
dotLi[i].onmouseover=function(){
clearInterval(timer);
for(var i=0;i<dotLi.length;i++){
dotLi[i].className="";
}
this.className="active";
oImg[0].src=arr[this.index];//小点对应的图片不正确，出现混乱；
}
}
}
</script>
</head>
<body>
<div id="scrollAdvWrap">
<ul id="adv">
<li>
<a href="#" target="_blank"><img src="images/2019030312_db55ca2f155f4d19aeca24361d0c9d81_7129_mwpm_03200403.jpg" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="images/2019030301_5f23d23f8b6743c2be80bdce17d80b11_2742_mwpm_03200403.jpg" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="images/l21S-hrvcwnk5207891.jpg" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="images/lpfY-hrvcwnk5211656.jpg" /></a>
</li>
<li>
<a href="#" target="_blank"><img src="images/pjCb-hrvcwnk5230787.jpg" /></a>
</li>
</ul>
<a href="javascript:;" id="prev"></a>
<a href="javascript:;" id="next"></a>
<ul id="dotBtn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
