banner学习定时器

Posted 2020-09-10

$(function(){
            
            var index = 1;
            var ul_li = $(‘.banner_ul li‘);
            var icon_li = $(‘.icon_ul li‘);
            var img_length = $(‘.banner_ul li‘).length;;
            var _width = img_length*20+"px";
            var new_left = (img_length*20)/2*-1 +"px";
            $(‘.icon_ul‘).css({"width":_width,"margin-left":new_left});
            $(‘.banner_ul li:eq(0)‘).css({"opacity":"1","z-index":"3"});
            $(‘.icon_ul li:eq(0)‘).addClass(‘li_on‘);
            
            //小点变色
            $(‘.icon_ul li‘).mouseover(function(){
                $(this).addClass(‘li_on‘).siblings(‘li‘).removeClass(‘li_on‘);
                var _index = $(this).index();
                ul_li.eq(_index).stop(true,false).animate({opacity:‘1‘},1000).siblings(‘li‘).stop(true,false).animate({opacity:‘0‘},1000);
                ul_li.eq(_index).css("z-index","3").siblings(‘li‘).css("z-index","2");    
                index = _index;
            });    
            //自动切换
            $(‘.banner_ul‘).hover(function(){
                clearInterval(picTimer);
            },function(){
                picTimer = setInterval(function(){
                    ul_li.eq(index).stop(true,false).animate({opacity:‘1‘},1000).siblings().stop(true,false).animate({opacity:‘0‘},1000);
                    ul_li.eq(index).css("z-index","3").siblings(‘li‘).css("z-index","2");
                    icon_li.eq(index).addClass(‘li_on‘).siblings(‘li‘).removeClass(‘li_on‘);
                    index++;
                    if(index == img_length){
                        index = 0;
                    }
                },3000);
            }).trigger("mouseout");
        });