JS写轮播图,定时器清除失效

Question

 <!--banner右边4张背景图    -->
<div class="g-banner-content" id="runBox">
    <ol id="ol">
        <img src="images/1.jpg" alt="">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/4.jpg" alt="">
    </ol>
    <ul class="circle" id="ul">
    </ul>
    <div class="arrow">
        <a href="#" class="arrow-l" id="bgl"></a>
        <a href="#" class="arrow-r" id="bgr"></a>
    </div>

var bannerBox = $("runBox"); var ol = $("ol"); var ul = $("ul"); ol.appendChild(ol.children[0].cloneNode(true)); var olLis = ol.children; for(var i=0;i<olLis.length-1;i++){ var ulLi = document.createElement("li"); ul.appendChild(ulLi); } var ulLis = ul.children; for(var i=0 ; i<ulLis.length;i++){ ulLis[i].index=i; ulLis[i].onmouseover=function () { for(var j=0;j<ulLis.length;j++){ ulLis[j].className= ""; } this.className = "current"; run(ol,-this.index*1200,40); key = circle = this.index; } ; } var key = 0; var circle = 0; var timer = null; timer = setInterval(autoPlay,3000); function autoPlay() { clearInterval(timer); key++; if (key > ulLis.length) { ol.style.left = 0; key = 1; } run(ol, -1200 * key, 15); circle++; if (circle > ulLis.length - 1) { circle = 0;} for (var j = 0; j < ulLis.length; j++) { ulLis[j].className = ""; } ulLis[circle].className = "current"; } bannerBox.onmouseover = function () { clearInterval(timer); }; bannerBox.onmouseout = function() { timer = setInterval(autoPlay,1000); // 开始轮播图定时器 };

Answer 1

bannerBox.onmouseover = function () { clearInterval(timer); };
bannerBox.onmouseout = function() { timer = setInterval(autoPlay,1000);
函数里加入,console.log可以执行,但是定时器无法清除,轮播图一直在走