zoukankan      html  css  js  c++  java
  • banner定时器

    $(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");
            });

  • 相关阅读:
    点双连通分量
    CF 839 E-最大团
    线性基
    CF 859 E
    【bzoj1303】[CQOI2009]中位数图
    【bzoj2282】[Sdoi2011]消防
    【bzoj2654]】tree
    【bzoj2600】 [Ioi2011]ricehub
    【bzoj4027】 [HEOI2015]兔子与樱花
    【bzoj3670】 [Noi2014]动物园
  • 原文地址:https://www.cnblogs.com/hlyin/p/6699639.html
Copyright © 2011-2022 走看看