选项卡自动切换，代码还未优化，但是当鼠标划过时图片内容就是空白的，请大神帮我看看代码，不知道哪里出问题了-慕课网

选项卡自动切换，代码还未优化，但是当鼠标划过时图片内容就是空白的，请大神帮我看看代码，不知道哪里出问题了

来源：3-1 js实现自动切换实现

吃瓜小夏

2016-08-04 09:53

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>SQL的小站首页</title>
    <script type="text/javascript">
        /*window.onload=function () {
            var timer=null;
            var a=document.getElementById("tip_list").getElementsByTagName("a");
            var img=document.getElementById("banner_pic").getElementsByTagName("img");
            if(a.length!=img.length) return;
            for(var i=0;i<a.length;i++){
                a[i].aa=i;
                a[i].onmouseover=function () {
                    var that=this;
                    if(timer){clearTimeout(timer);
                    timer=null;}
                    timer=setTimeout(function () {
                        for(var k=0;k<a.length;k++){
                            a[k].className="";
                            img[k].style.display="none";
                        }
                        that.className="selected";
                        img[that.aa].style.display="block";
                    },1000)
                }
            }

        }
        */
        window.onload=function () {
            // 当前高亮显示的页签的索引
            var index = 0;
            var timer = null;
            // 获取所有的页签和要切换的内容
            var a = document.getElementById("tip_list").getElementsByTagName("a");
            var img = document.getElementById("banner_pic").getElementsByTagName("img");
            // 遍历每一个页签且给他们绑定事件
            for (var i = 0; i < a.length; i++) {
                a[i].aa = i;
                a[i].onmouseover = function () {
                    clearInterval(timer);
                    for (var j = 0; j < a.length; j++) {
                        a[j].className = "";
                        img[j].style.display = "none";
                    }
                    // 高亮显示当前页签
                    a[this.aa].className = "selected";
                    img[this.aa].style.display = "blcok";
                };
                a[i].onmouseout = function () {
                    timer = setInterval(function () {
                        index++;
                        if (index >= a.length) {
                            index = 0;
                        }
                        for (var j = 0; j < a.length; j++) {
                            a[j].className = "";
                            img[j].style.display = "none";
                        }
                        a[index].className = "selected";
                        img[index].style.display = "block";
                    }, 2000);

                }

            }
            if (timer) {
                clearInterval(timer);
                timer = null;
            }
            timer = setInterval(function () {
                index++;
                if (index >= a.length) {
                    index = 0;
                }
                for (var j = 0; j < a.length; j++) {
                    a[j].className = "";
                    img[j].style.display = "none";
                }
                a[index].className = "selected";
                img[index].style.display = "block";
            }, 2000);

        }
    </script>
    <style type="text/css">
        *{margin:0;
            padding:0;
        }
        #banner{
            position: relative;
            height: 560px;
            width: 1344px;
            overflow: hidden;
        }
        #banner_pic img{
            width:100%;

        }
        #banner_pic img{
            display: none;
        }
        #tip_list{
            position: absolute;
            top: 510px;
            left:50%;
            width: 200px;
            margin-left: -100px;
            text-align: center;
        }
        #tip_list a:link,#tip_list a:visited{
            color: white;
            margin:0 10px;
        }
        #tip_list a:hover{
            color:red;
        }
        #tip_list .selected{
            background-color: aqua;
        }

    </style>
</head>
<body>

    <div id="banner_box">
        <div id="banner">
            <ul id="banner_pic">
                <li><a href="#"><img style="display:block" src="images/001.png" alt="无"></a></li>
                <li><a href="#"><img src="images/2.png" alt="无"></a></li>
                <li><a href="#"><img src="images/003.png" alt="无"></a></li>
            </ul>
            <div id="tip_list">
                <a href="#" class="selected">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
            </div>
        </div>
    </div>

</body>
</html>

写回答关注