個(gè)人博客—輪播器

• 輪播器自動(dòng)輪播，每張圖片淡入淡出
• 控制按鈕和圖片描述跟隨圖片輪播
• 鼠標(biāo)懸停圖片上方則停止輪播，滑出后從當(dāng)前圖片繼續(xù)輪播
• 鼠標(biāo)滑到控制器上方則對(duì)應(yīng)圖片顯示，且停止輪播，滑出后從當(dāng)前圖片繼續(xù)輪播

輪播器

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, //當(dāng)前控制按鈕
        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);
    // 定時(shí)器每3秒自動(dòng)變換一次banner
    var banner_timer = setInterval(function(){ 
        if(cur_index < img_list_length -1){ 
            cur_index ++; 
        }else{ 
            cur_index = 0;
        }
        //調(diào)用變換處理函數(shù)
        banner_to(cur_index); 
    },3000);
    //調(diào)用控制按鈕點(diǎn)擊和鼠標(biāo)懸浮事件處理函數(shù)
    addEvent(); 
    function addEvent(){
        for(var i=0;i<img_list_length;i++){ 
            //閉包防止作用域內(nèi)活動(dòng)對(duì)象的影響
            (function(j){ 
                //鼠標(biāo)懸浮圖片上方則清除定時(shí)器
                $(control_list[j]).on("mouseover",function(){ 
                    if(cur_index == j){
                        clearTimeout(banner_timer);
                    }else {
                        clearTimeout(banner_timer);
                        banner_to(j);
                        cur_index = j;
                    }
                });
                //鼠標(biāo)滑出圖片則重置定時(shí)器
                $(control_list[j]).on("mouseout",function(){ 
                  banner_timer = setInterval(function(){ 
                    if(cur_index < img_list_length -1){ 
                      cur_index ++;
                    }else{ 
                      cur_index = 0;
                    }
                    //調(diào)用變換處理函數(shù)
                    banner_to(cur_index); 
                  },3000);
                });
              })(i);
            (function(j){ 
                //鼠標(biāo)懸浮圖片上方則清除定時(shí)器
                $(img_list[j]).on("mouseover",function(){ 
                  clearTimeout(banner_timer);
                  cur_index = j;
                });
                //鼠標(biāo)滑出圖片則重置定時(shí)器
                $(img_list[j]).on("mouseout",function(){ 
                  banner_timer = setInterval(function(){ 
                    if(cur_index < img_list_length -1){ 
                      cur_index ++;
                    }else{ 
                      cur_index = 0;
                    }
                    //調(diào)用變換處理函數(shù)
                    banner_to(cur_index); 
                  },3000);
                });
              })(i);
        }
    }
    //變換處理函數(shù)
    function banner_to(num){ 
        $("#banner .img_on").fadeOut().removeClass("img_on"); //淡出當(dāng)前banner
        $(img_list[num]).fadeIn().addClass("img_on"); //淡入目標(biāo)banner
        $('#banner strong').html($($(img_list)[num]).attr('alt'));
        //設(shè)置banner的控制按鈕
        $("#banner .control_on").removeClass("control_on");
        $(control_list[num]).addClass("control_on");
    }

<b><big>代碼在Github：個(gè)人博客</big></b>