可以把大DIV（包含页签P和内容ul部分）放在鼠标移入事件内

1;因为你没有指定timer变量去承载这个方法，方法就找不到执行的规律

2：可以直接获取内容，并遍历执行切换函数

3：给clear=null；是为了让程序有更好的可读性，并从新赋值给clear，避免不必要的bug

你没有调用自动播放函数，如果想页面一加载完毕就自动播放，应该在window。onload（）中调用一下自动播放函数，  这样试试：

function qude(){

       index++;

       if (index>=list.length) {

       index=0

       }

       common(index)

      }；qude()；

或者你把timer=setInterval(qude,2000)与

 if (timer) {

       clearInterval(timer)

       timer=null

      }

位置换一下，你这样设置，不就把timer定时器给null了么

封装一下函数，优化下

第二次加是因为如果鼠标来回滑动的过于频繁就会导致一种情况：第一次触发的定时器还没有被清除，又触发了
定时器，如此就会导致定时器的累计，容易卡死。所以先清除定时器。

应该是clear函数没起作用，我也遇到了这个问题，还没找到办法解决。

function $(id) {
            return typeof id === "string" ? document.getElementById(id) : id;
        }
        window.onload = function() {
            var index = 0;
            var timer = null;
            var tits = $("tabTit").getElementsByTagName("li");
            var txts = $("tabTxt").getElementsByClassName("demo");
            if(tits.length != txts.length) {return;}
            for(var i=0,l=tits.length; i<l; i++) {
                tits[i].id = i;
                tits[i].onmouseover = function() {
                    clearInterval(timer);
                    styleFun(this.id);
                }
                tits[i].onmouseout = function() {
                    timer = setInterval(autoPlay, 2000);
                }
            }
            //在开启定时器的同时清楚定时器并置空
            if(timer) {
                clearInterval(timer);
                timer = null;
            }
            timer = setInterval(autoPlay, 2000);
            function autoPlay() {
                index++;
                if(index >= tits.length) {
                    index = 0;
                }
                styleFun(index);
            }
            function styleFun(ele) {
                for(var j=0,m=tits.length; j<m; j++) {
                    tits[j].className = "";
                    txts[j].style.display = "none";
                }
                tits[ele].className = "select";
                txts[ele].style.display = "block";
                //将鼠标移入移出时的index传给autoPlay;
                index = ele;
            }
        }

还是传值吧，这样是比较优化的，用的次数多了，你就知道老师的方法是非常不错的！

经 "落夜星空 " 提问,在回看视频,似乎觉得 "if ( timer ) { clearInterval ( timer ); timer = null; }" 这段代码不需要.
为什么呢? 因鼠标滑入TITLE 区后 定时器就关了(手动切换,停止自动切换执行),后续鼠标在TITLE 区左右来回移动也不会再启动定时器.所以上述代码就变的有点多余了

onmouseover :当鼠标浮动到本身和子元素时候都会触发  建议使用 onmouseenter  onmouseleave替换 这个只在元素本身触发

发代码

亮代码

JS不熟。

封装鼠标移出事件是为了让鼠标移出时还能继续自动切换的效果，如果不封装，鼠标移出后无法继续自动切换。

我也遇到这个问题了 鼠标移出标题栏 到内容区域还是会跳开让客户没有时间选择下面链接蜀国时间在3秒内

优化定时器呀。清除定时器，避免多次鼠标滑过出现BUG。

那每个页面添加一个鼠标移入的事件，当鼠标移入这个页面时，就取消定时器，当鼠标移开时，再重新开启一下定时器

给你一下你的代码，别人才能看出原因，别人是猜不到你的问题在哪里，因为别人不知道你的代码是怎么写的。

jQuery(document).ready(function() {
    var t = $(".dox li"),
        b = $(".dox div");
    var index = 0;
    var timer = null;
    // if (t.length != b.length) return;
    for (var i = 0; i < t.length; i++) {
        t[i].id = i;
        $(t[i]).mouseover(function() {
            var that = this;
            clearInterval(timer);
            timer = setTimeout(function() {
                for (var j = 0; j < b.length; j++) {
                    b.css("display", "none");
                    t.removeClass();
                };
                $(that).addClass('hover');
                $(b[that.id]).css("display", "block");
            }, 150);
            // console.log(this.id)
            index = this.id;

        });
        $(t[i]).mouseout(function() {
            // clearInterval(timer);
            timer = setInterval(function() {

                index++;
                if (index >= t.length) {
                    index = 0;
                }
                for (var j = 0; j < b.length; j++) {
                    b.css("display", "none");
                    t.removeClass();
                };
                $(t[index]).addClass('hover');
                $(b[index]).css("display", "block");
            }, 2000);
        });
    };
    // if (timer) {
    //     clearInterval(timer);
    //     timer = null;
    // }
    timer = setInterval(function() {
        index++;
        if (index >= t.length) {
            index = 0;
        }
        for (var j = 0; j < b.length; j++) {
            b.css("display", "none");
            t.removeClass();
        };
        $(t[index]).addClass('hover');
        $(b[index]).css("display", "block");
        console.log(index);
    }, 2000);
});

 $(t[i]).mouseover(function() {
            var that = this;
            clearInterval(timer);
            timer = setTimeout(function() {
                for (var j = 0; j < b.length; j++) {
                    b.css("display", "none");
                    t.removeClass();
                };
                $(that).addClass('hover');
                $(b[that.id]).css("display", "block");
                index = that.id;
            }, 150);

鼠标划过标签的时候并没有修改index的值，这样当鼠标离开当前标签后index的值是上次自动播放的index+1。解决办法是在鼠标划过标签后，把index的值修改为标签的id值，这样下次自动播放时就会从划过标签的下一个标签开始。代码如上，添加的代码在倒数第二行。

是的，我加了if(timer)后console.log了一下，依然有重复打印记录