javascript - 请问为什么我这样写的为什么第一张可以显示，其它的都显示不了？
本文介绍了javascript - 请问为什么我这样写的为什么第一张可以显示，其它的都显示不了？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在控制台看到其它的图片所在的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>解决方案
O(∩_∩)O~为了看下效果，我还去找了几个图
<!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;
overflow: hidden;
}
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/dialog1_2.png" alt="Lone"></li>
<li><img src="img/dialog2_2.png" alt="Ltwo" ></li>
<li><img src="img/dialog3_2.png" alt="Lthree" ></li>
<li><img src="img/dialog4_2.png" alt="Lfour" ></li>
<li><img src="img/dialog5_2.png" alt="Lfive" ></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>没出来的原因是图片全被你display:none掉了，然后你js控制的display又是li的。一开始让你的图都显示出来，给.wrap加个overflow：hidden;这样就正常了。
这篇关于javascript - 请问为什么我这样写的为什么第一张可以显示，其它的都显示不了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
