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

  • 相关阅读:
    Windows下安装Redmine
    【精华】Linux/GNOME的小技巧
    Perl简单教程
    【转载】手把手教你配置Windows2003集群(图)
    Windows 7 下如何配置PHP网站运行环境
    常用的PHP数据库操作方法(MYSQL版)
    CentOS上搭建Nginx + Mono 运行 asp.net
    【视频】Win2003 iis 流媒体设置
    【实用】OS X Lion restore Recovery HD Manually 手工创建 OS X Lion 恢复分区
    【小结】CentOS Linux操作系统的设置:
  • 原文地址:https://www.cnblogs.com/hlyin/p/6699639.html
Copyright © 2020-2023  润新知