请问为什么我这样写的为什么第一张可以显示,其它的都显示不了?

吴小粥
  • 512

在控制台看到其它的图片所在的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>
回复
阅读 2k
3 个回答
✓ 已被采纳

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;这样就正常了。

因为你的图片都被设置成display:none
另外给#pic设置个宽高,然后overflow:hidden,刷新的时候会出现图片闪烁

行间样式在作用着,把style="display:none;" 删掉,写到style里面去

宣传栏