个人博客—轮播器

个人博客—轮播器

• 轮播器自动轮播，每张图片淡入淡出
• 控制按钮和图片描述跟随图片轮播
• 鼠标悬停图片上方则停止轮播，滑出后从当前图片继续轮播
• 鼠标滑到控制器上方则对应图片显示，且停止轮播，滑出后从当前图片继续轮播

轮播器

html部分

 <div id="banner">
      <a href="#"><img class="img_on" src="img/banner1.jpg" alt="轮播器第一张" /></a>
      <a href="#"><img src="img/banner2.jpg" alt="轮播器第二张" /></a>
      <a href="#"><img src="img/banner3.jpg" alt="轮播器第三张" /></a>          
      <ul>
        <li class="control_on"></li>
        <li></li>
        <li></li>
      </ul>
      <span></span>
      <strong></strong>
    </div>

js部分

    var cur_index = 0, //当前控制按钮
        img_list = $("#banner img"), //图片组
        img_list_length = img_list.length,
        control_list = $("#banner ul li"); //控制组
    $('#banner strong').html($(img_list).first().attr('alt'));
    $(img_list).fadeOut();
    banner_to(cur_index);
    // 定时器每3秒自动变换一次banner
    var banner_timer = setInterval(function(){ 
        if(cur_index < img_list_length -1){ 
            cur_index ++; 
        }else{ 
            cur_index = 0;
        }
        //调用变换处理函数
        banner_to(cur_index); 
    },3000);
    //调用控制按钮点击和鼠标悬浮事件处理函数
    addEvent(); 
    function addEvent(){
        for(var i=0;i<img_list_length;i++){ 
            //闭包防止作用域内活动对象的影响
            (function(j){ 
                //鼠标悬浮图片上方则清除定时器
                $(control_list[j]).on("mouseover",function(){ 
                    if(cur_index == j){
                        clearTimeout(banner_timer);
                    }else {
                        clearTimeout(banner_timer);
                        banner_to(j);
                        cur_index = j;
                    }
                });
                //鼠标滑出图片则重置定时器
                $(control_list[j]).on("mouseout",function(){ 
                  banner_timer = setInterval(function(){ 
                    if(cur_index < img_list_length -1){ 
                      cur_index ++;
                    }else{ 
                      cur_index = 0;
                    }
                    //调用变换处理函数
                    banner_to(cur_index); 
                  },3000);
                });
              })(i);
            (function(j){ 
                //鼠标悬浮图片上方则清除定时器
                $(img_list[j]).on("mouseover",function(){ 
                  clearTimeout(banner_timer);
                  cur_index = j;
                });
                //鼠标滑出图片则重置定时器
                $(img_list[j]).on("mouseout",function(){ 
                  banner_timer = setInterval(function(){ 
                    if(cur_index < img_list_length -1){ 
                      cur_index ++;
                    }else{ 
                      cur_index = 0;
                    }
                    //调用变换处理函数
                    banner_to(cur_index); 
                  },3000);
                });
              })(i);
        }
    }
    //变换处理函数
    function banner_to(num){ 
        $("#banner .img_on").fadeOut().removeClass("img_on"); //淡出当前banner
        $(img_list[num]).fadeIn().addClass("img_on"); //淡入目标banner
        $('#banner strong').html($($(img_list)[num]).attr('alt'));
        //设置banner的控制按钮
        $("#banner .control_on").removeClass("control_on");
        $(control_list[num]).addClass("control_on");
    }

<b><big>代码在Github：个人博客</big></b>