请问为什么我这样写的为什么第一张可以显示，其它的都显示不了？
在控制台看到其它的图片所在的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>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
因为你的图片都被设置成display：none
另外给#pic设置个宽高，然后overflow：hidden，刷新的时候会出现图片闪烁
行间样式在作用着，把style="display:none;" 删掉，写到style里面去
O(∩_∩)O~为了看下效果，我还去找了几个图
没出来的原因是图片全被你
display:none掉了，然后你js控制的display又是li的。一开始让你的图都显示出来，给.wrap加个overflow：hidden;这样就正常了。