编程爱好者之家

jquery的tab标签实现每5秒钟自动切换的效果

2018-02-27 15:25:44 503

$(function(){
    var i=0;//初始记录用户鼠标经过是第几个li
    var canmove=true;
    $('.menu li').mouseenter(function(){
        canmove=false;
        clearInterval(li_timer);
        i=$(this).index();
        $(this).addClass('off').siblings().removeClass('off');
        $('.menudiv div').hide();
        $('.menudiv div').eq(i).show(); 
    });
 
    $("#tab1").mouseenter(function(){//只要用户鼠标在这个tab1区域内,就不自动跳转
        canmove=false;
    }).mouseleave(function(){
        clearInterval(li_timer);
        setTimeout(function(){canmove=true;},2000);//两秒后自动切换
    });
 
    function li_timer(){
        if(canmove){
            i++;
            if(i==$('.menu li').length){
                i=0;
            }
            $('.menu li').eq(i).addClass('off').siblings().removeClass('off');
            $('.menudiv div').hide();
            $('.menudiv div').eq(i).show(); 
        }
 
    }
    setInterval(li_timer,5000);//每五秒切换
});


同类文章