setTimeout 失效 setTimeout和setInterval 同时存在

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>music3.0</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div>
        <div></div>
        <div></div>
    </div>
    <div class="content center">
        <div>
            <div id="title">
                <ul>
                    <li><a href="#">第1</a></li>
                    <li><a href="#">第2</a></li>
                    <li><a href="#">第3</a></li>
                    <li><a href="#">第4</a></li>
                    <li><a href="#">第5</a></li>
                </ul>
            </div>
            <div id="cont">
                <div>
                    <img src="img/1 (1).webp" alt="">
                </div>
                <div>
                    <img src="img/1 (2).webp" alt="">
                </div>
                <div>
                    <img src="img/1 (3).webp" alt="">
                </div>
                <div>
                    <img src="img/1 (4).webp" alt="">
                </div>
                <div>
                    <img src="img/1 (5).webp" alt="">
                </div>
            </div>
        </div>
    </div>
    <div></div>
<script src="js/script.js"></script>
</body>
</html>

function $(id){
    return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
    var timer=null;
    var timer2=null;
    var index=0;
    //获取鼠标滑过或点击的标签和要切换内容的元素
    var lis=$('title').getElementsByTagName('li'),
        divs=$('cont').getElementsByTagName('div');
    if(lis.length!=divs.length)
    return;
    //遍历title下的所有li
    for(i=0;i<lis.length;i++){
        lis[i].id=i;
        lis[i].onmouseover=function(){
            clearInterval(timer2);
            //用that来引用当前的li
            var that=this;
            //如果存在定时器，就清除定时器
            if(timer){
                clearTimeout(timer);
                timer=null;
            }
            timer=setTimeout(changeOption(that.id),500)
        }
        lis[i].onmouseout=function(){
            timer2=setInterval(autoPlay,2000);
        }
    }
    //定时器，定时改变
    if(timer2){
        clearInterval(timer2);
        timer2=null;
    }
    timer2=setInterval(autoPlay,2000);

    //封装
    function changeOption(x){
                //清除所有li上的active
                    for(j=0;j<lis.length;j++){
                        lis[j].className='';
                        divs[j].style.display='none';
                    }
                //设置当前高亮显示
                    lis[x].className='active';
                    divs[x].style.display='block';
                    index=x;
    }
    function autoPlay(){
            index++;
            if(index>=lis.length){
                index=0;}
            changeOption(index);
        }
}
GatsbyJh
浏览 1921回答 1
1回答

其实我真的不是东北人
你要粘贴就全部粘贴，留意半成品这里，又看不到效果。
0 1
随时随地看视频慕课网APP