大家看看哪里有問(wèn)題？
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
??<title>Document</title>
??<style>
*{margin:0;
padding:0;
list-style:none;}
.wrap{height:170px;
width:490px;
margin:60px auto;
overflow: hidden;
position: relative;
}
.wrap ul{position:absolute;}
.wrap ul li{height:170px;}
.wrap ul .hide{display:none;}
.wrap ol{position:absolute;
right:5px;
bottom:10px;}
.wrap ol li{height:20px; width: 20px;
background:#ccc;
border:solid 1px #666;
margin-left:5px;
color:#000;
float:left;
line-height:center;
text-align:center;
cursor:pointer;}
.wrap ol .on{background:#E97305;
color:#fff;}
</style>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById('wrap');
var pic=document.getElementById('pic');
var imags=pic.getElementsByTagName('li');
var list=document.getElementById('list');
var lis=list.getElementsByTagName('li');
var index=0;
var timer=null;
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
clearInterval(timer); ? ? ? //鼠標(biāo)劃過(guò)時(shí)清除定時(shí)器
lis[i].index=i;
for(var j=0;j<lis.length;j++){ ? ? ?//初始化所有的li和div標(biāo)簽
imags[j].className="hide";
lis[j].className="";
}
imags[this.index].className="";
this.className="on";
}
lis[i].ommouseout=function(){
timer=setInterval(autoplay,1000);
}
}
timer=setInterval(autoplay,1000);
function autoplay(){
index1++;
if(index1>=lis.length)
index1=0;
for(var j=0;j<lis.length;j++){
imags[j].className="hide";
lis[j].className="";
}
imags[index1].className="";
lis[index1].className="on";
}
}
</script>?
</head>
<body>
<div class="wrap" id="wrap">
<ul id="pic">
<li><img src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg" alt=""></li>
<li class="hide"><img src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg" alt=""></li>
<li class="hide"><img src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg" alt=""></li>
<li class="hide"><img src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
</html>
2020-05-01
修改如下,錯(cuò)誤部分已注釋,整個(gè)代碼可執(zhí)行
<!doctype?html><html><head><meta?charset="UTF-8">??<title>Document</title>??<style>*{margin:0;padding:0;list-style:none;}.wrap{height:170px;width:490px;margin:60px?auto;overflow:?hidden;position:?relative;}.wrap?ul{position:absolute;}.wrap?ul?li{height:170px;}.wrap?ul?.hide{display:none;}.wrap?ol{position:absolute;right:5px;bottom:10px;}.wrap?ol?li{height:20px;?width:?20px;background:#ccc;border:solid?1px?#666;margin-left:5px;color:#000;float:left;line-height:center;text-align:center;cursor:pointer;}.wrap?ol?.on{background:#E97305;color:#fff;}</style><script?type="text/javascript">window.onload=function(){var?wrap=document.getElementById('wrap');var?pic=document.getElementById('pic');var?imags=pic.getElementsByTagName('li');var?list=document.getElementById('list');var?lis=list.getElementsByTagName('li');var?index=0;var?timer=null;//二定義并調(diào)用自動(dòng)播放函數(shù)timer=setInterval(autoplay,1000);//四遍歷所有數(shù)字導(dǎo)航實(shí)現(xiàn)劃過(guò)切換至對(duì)應(yīng)的圖片for(var?i=0;i<lis.length;i++){lis[i].onmouseover=function(){clearInterval(timer);?index=this.innerHTML-1;//必須減1,否則移入指到最后一張會(huì)報(bào)錯(cuò)//lis[i].index=i;??//lis[i]沒(méi)有index的屬性for(var?j=0;j<lis.length;j++){??????//初始化所有的li和div標(biāo)簽//imags[j].className="hide";?圖片需定義display,display只有none,blockimags[j].style.display="none";lis[j].className=""};//imags[this.index].className="";同上imags[index].style.display="block";lis[index].className="on";};};//五鼠標(biāo)離開(kāi)整個(gè)容器時(shí)繼續(xù)播放至下一張list.onmouseout=function(){timer=setInterval(autoplay,1000);};//autoplay?函數(shù)定義function?autoplay(){//index1++;?上面定義indexindex++;if(index>=lis.length){index=0;};for(var?j=0;j<lis.length;j++){//imags[j].className="hide";//lis[j].className="";imags[j].style.display="none";lis[j].className="";};?console.log(index);//imags[index1].className="";imags[index].style.display="block";lis[index].className="on";};//總結(jié)?://?1.容器移入移出沒(méi)寫(xiě)?wrap.onmouseover?&?wrap.onmouseout}</script>?</head><body><div?class="wrap"?id="wrap"><ul?id="pic"><li><img?src="http://img1.sycdn.imooc.com/54111cd9000174cd04900170.jpg"?alt=""></li><li?class="hide"><img?src="http://img1.sycdn.imooc.com/54111dac000118af04900170.jpg"?alt=""></li><li?class="hide"><img?src="http://img1.sycdn.imooc.com/54111d9c0001998204900170.jpg"?alt=""></li><li?class="hide"><img?src="http://img1.sycdn.imooc.com/54111d8a0001f41704900170.jpg"?alt=""></li></ul><ol?id="list"><li?class="on">1</li><li>2</li><li>3</li><li>4</li></ol></div></body></html>2017-09-13