问答详情
源自：4-1 焦点轮播图效果

焦点图轮播 鼠标离开后图片混乱播放

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;
            padding:0;
            list-style:none;}
        .wrap{height:170px;
            width:490px;
            overflow: hidden;
            position: relative;
            margin:100px auto;}

        .wrap ul li img{height:170px;width: 100%}
        .wrap ol{position:absolute;
            right:5px;
            bottom:10px;}
        .wrap ol li{height:20px; width: 20px;
            background:#ccc;
            border:solid 1px #666;
            margin-left:5px;
            color:#000;
            float:left;
            line-height:20px;
            text-align:center;
            cursor:pointer;}
        .wrap ol .on{background:#E97305;
            color:#fff;}

    </style>
    <script type="text/javascript">
        window.onload=function(){
            var wrap=document.getElementById('wrap');
                    pic=document.getElementById('pic');
                    img=pic.getElementsByTagName("img");
                    list=document.getElementById('list').getElementsByTagName('li');
                    index=0;
                    timer=null;
            if (timer) {
                clearInterval(timer);
                timer = null;
            }
            // 定义并调用自动播放函数
 timer=setInterval(function(){autoPlay()},2000);
            function autoPlay(){
                index++;
                if(index>=list.length){index=0}
                changOption(index);
            }
        // 鼠标划过整个容器时停止自动播放
 wrap.onmouseover=function(){
                clearInterval(timer);
            };
        // 鼠标离开整个容器时继续播放至下一张
 wrap.onmouseout=function () {
                setInterval(function(){autoPlay()},2000);
            };
        // 遍历所有数字导航实现划过切换至对应的图片
 for (var i = 0; i < list.length; i++) {
                list[i].aa = i;
                list[i].onmouseover = function () {
                    changOption(this.aa);
                };
                list[i].onmouseout = function () {
                    setInterval(function () {
                        autoPlay()}, 2000);
                }
            }
            function changOption(currIndex){
                if (timer) {
                    clearInterval(timer);
                    timer = null;
                }
                for (var j = 0; j < list.length; j++) {
                    list[j].className = "";
                    img[j].style.display = "none";
                }
                list[currIndex].className = "on";
                img[currIndex].style.display = "block";
                index=currIndex;
            }
        }

    </script>
</head>
<body>
<div class="wrap" id='wrap'>
    <ul id="pic">
        <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
        <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
        <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
        <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
        <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
    </ul>
    <ol id="list">
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>
</body>
</html>


提问者：吃瓜小夏 2016-08-04 13:44

个回答

  • qq_凉风有信丶_03837837
    2016-10-17 02:23:33
    已采纳

    你div都有定时器，还有就是你上面的定时器和下面onmouseout的定时器不是一个，就是说，你一共用了三个= = ，所以你那个使劲跳

    0
  • qq_凉风有信丶_03837837
    2016-10-17 02:34:12

    还有一个clearInterval(timer);应该放在onmouseover方法里

    0
  • qq_凉风有信丶_03837837
    2016-10-17 02:19:38

     window.onload=function(){

                var wrap=document.getElementById('wrap');

                   var     pic=document.getElementById('pic');

                     var   img=pic.getElementsByTagName("li");

                      var  list=document.getElementById('list').getElementsByTagName('li');

                       var index=0;

                       var  timer=null;

                if (timer) {

                    clearInterval(timer);

                    timer = null;

                }

                // 定义并调用自动播放函数

     

                function autoPlay(){

                    index++;

                    if(index>=list.length){index=0}

                    changOption(index);

                }

    timer=setInterval(autoPlay,2000);

            // 鼠标划过整个容器时停止自动播放

     

            // 遍历所有数字导航实现划过切换至对应的图片

                 for (var i = 0; i < list.length; i++) {

                    list[i].aa = i;

                    list[i].onmouseover = function () {

                        changOption(this.aa);

                    };

                    list[i].onmouseout = function () {

    clearInterval(timer);

                      timer=setInterval(autoPlay,2000);

                    }

                }

                function changOption(currIndex){

                    

                    for (var j = 0; j < list.length; j++) {

                        list[j].className = "";

                        img[j].style.display = "none";

                    }

                    list[currIndex].className = "on";

                    img[currIndex].style.display = "block";

                    index=currIndex;

                }

            }

     


    0
  • 火星上的鱼
    2016-08-04 15:36:21

    从未见过如此鬼畜的轮播图片(﹁"﹁)

    0