在控制臺看到其它的圖片所在的li高度都為0。同時可以在控制臺看到輪播的時候的確li的display會改變。圖片路徑什么的都是沒有問題的<!DOCTYPE?html><html?lang="en"><head>
????<meta?charset="UTF-8">
????<title>?javascript焦點圖輪播代碼實例詳解?</title>
????<style>
????????*{????????????margin:?0;????????????padding:?0;????????????list-style:?none;????????}
????????.wrap{????????????height:?170px;????????????width:?490px;????????????position:?relative;????????????margin:?100px?auto;????????}
????????ul?li?img{????????????width:?490px;????????????height:?170px;????????}
????????.wrap?ol{????????????position:?absolute;????????????right:?5px;????????????bottom:?10px;????????}
????????.wrap?ol?li{????????????height:?20px;????????????width:20px;????????????background-color:?#ccc;????????????border:?solid?#666?1px;????????????margin-left:?5px;????????????color:?#000;????????????float:?left;????????????line-height:?20px;????????????text-align:?center;????????????cursor:?pointer;?
????????}
????????.wrap?ol?.on{????????????background-color:?#e97305;????????????color:?#fff;????????}
????????.clearfix:before,.clearfix:after{???????????content:?"";???????????display:?table;????????}
?????????.clearfix:after{????????????clear:?both;????????}
????</style></head><body>
????<div?class="wrap"?id="wrap">
????????<ul?id="pic">
????????????<li><img?src="img/Lone.jpg"?alt="Lone"></li>
????????????<li><img?src="img/Ltwo.jpg"?alt="Ltwo"?style="display:none;"></li>
????????????<li><img?src="img/Lthree.jpg"?alt="Lthree"?style="display:none;"></li>
????????????<li><img?src="img/Lfour.jpg"?alt="Lfour"?style="display:none;"></li>
????????????<li><img?src="img/Lfive.jpg"?alt="Lfive"?style="display:none;"></li>
????????</ul>
????????<ol?id="list"?class="clearfix">
????????????<li?class="on">1</li>
????????????<li>2</li>
????????????<li>3</li>
????????????<li>4</li>
????????????<li>5</li>
????????</ol>
????</div>
????<script>
????????window.onload=function(){????????????var?pic=document.getElementById('pic').getElementsByTagName('li');????????????var?list=document.getElementById('list').getElementsByTagName('li');????????????var?index=0;????????????var?timer=null;????????????for?(var?x?=?0;?x?<?pic.length;?x++)?{
????????????????list[x].id=x;
????????????????pic[x].id=x;
????????????????list[x].onmouseover=function(){
????????????????????clearInterval(timer);
????????????????????changeImg(this.id);
????????????????}
????????????????list[x].onmouseout=function(){
????????????????????index=this.id;
????????????????????autoChange(index);
????????????????}????????????????document.getElementById('pic').onmouseout=function(){
????????????????????autoChange(index);
????????????????}????????????????document.getElementById('pic').onmouseover=function(){
????????????????????clearInterval(timer);
????????????????}
????????????}
????????????autoChange(index);????????????function?changeImg(id){????????????????for?(var?j?=?0;?j?<?list.length;?j++)?{
????????????????????list[j].className="";
????????????????????pic[j].style.display="none";
????????????????}
????????????????list[id].className="on";
????????????????pic[id].style.display="block";
????????????}????????????function?autoChange(index){
????????????????timer=setInterval(function(){
????????????????????index++;????????????????????if(index>=pic.length){
????????????????????????index=0;
????????????????????};
????????????????????changeImg(index);
????????????????},1000)
????????????}
????????}????</script></body></html>
請問為什么我這樣寫的為什么第一張可以顯示，其它的都顯示不了？
Joeeeee
2016-09-18 20:53:22
