选项卡切换：自动定时&主动触发事件

最初学习的是手动触发事件，添加的是onmouseover，其中index是关键，tab标签与现实内容的div索引一一对应，遍历tab标签，当鼠标移动到某标签时，触发对应的内容div显示。
for(var i=0;i<img.length;i++){
    img[i].index=i;
    img[i].onmouseover=function(){
        for(var i=0;i<img.length;i++){
            img[i].className="";
            content_div[i].className="content_div";
        };
        this.className="active";
        content_div[this.index].className="content_div_active";
    };
}

但是在需要添加定时器时，无函数可调用，基本思路应该是，编辑一个根据tab标签而切换内容的函数，调用分别为两处：onmouseover和setInterval中。上面代码写在遍历for循环里面，执行函数与i相关联，
如果单独抽出，其中变动的数字不知如何表达，网上查阅答案，发现可以使用传参的方式（好像在学习的初期，不太习惯使用函数传参，但是这样貌似能更加容易的解决问题）

    var img=document.getElementsByTagName("img");
    var content_div=document.getElementsByClassName("content")[0].getElementsByTagName("div");
    var index=0;

    for (var i = 0; i< img.length; i++)
    {
        img[i].index=i;
        img[i].onmouseover=function()
        {
            autoChange(this);   //点击到哪一个img，函数就对那个img执行。
        };
    };

    function autoChange(obj){
        if(!obj){    //obj为undefined，！obj为true。
            obj = img[index];   //初始index为0；所以定时器由img[0]开始执行
            if(index>=img.length-1) {   //当index>=3,即循环到最后一个img时---->>>index=0，开始循环到第一个img
                index = 0;
            }else {
                index++;
            }
        }
        for (var i = 0; i< img.length; i++)
        {
            img[i].className="";
            content_div[i].className="content_div";
        };
        obj.className="active";
        content_div[obj.index].className="content_div_active";
    }

    setInterval(autoChange,1000);      //autoChange不带括号写入，表示将整个函数的方法写入，其中obj不传参。
巴特西

选项卡切换：自动定时&主动触发事件

最新文章

热门文章
