一款不用任何插件精美小巧的JQuery圖片輪播

現(xiàn)在好多帶插件的JQuery焦點(diǎn)圖片效果，一個(gè)網(wǎng)站那么多效果就要好多插件，這無(wú)疑給網(wǎng)站增加一定的負(fù)擔(dān)，現(xiàn)在介紹一款不用任何插件，代碼量很少且便于操作的圖片輪播效果，希望有所幫助

說(shuō)下思路，比如有三張圖片需要輪播，首先把除了第一張以外的圖片隱藏掉，然后點(diǎn)擊圖片右下方相應(yīng)的按鈕來(lái)切換圖片顯示，用JQuery的fadeIn和fadeOut效果就可以，最后設(shè)置延時(shí)自動(dòng)加載方法setInterval()來(lái)實(shí)現(xiàn)圖片輪播到頭后自動(dòng)開始新一輪輪播。

效果預(yù)覽：

HTML部分代碼：

<div id="banner"> 
    <div id="banner_bg"></div> 
    <div id="banner_info"></div> 
    <ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    </ul> 
    <div id="banner_list"> 
    <a href="#"><img src=" " alt="bing讀心機(jī)器人" title="bing讀心機(jī)器人" border="0" width="705" height="240"/></a> 
    <a href="#"><img src=" " alt="手機(jī)輻射監(jiān)測(cè)器" title="手機(jī)輻射監(jiān)測(cè)器" border="0" width="705" height="240"/></a> 
    <a href="#"><img src=" " alt="GIF快手" title="GIF快手" border="0" width="705" height="240"/></a> 
    </div> 
</div> 

#banner_bg是圖片下方半透明的title背景圖
#banner_info里面內(nèi)容顯示圖片標(biāo)題
<ul>部分是右下方三個(gè)切換圖片的小按鈕
#banner_list里面是要輪播的三張圖片

CSS樣式：

#banner {position:relative; width:705px; height:240px; overflow:hidden; font-size:16px; margin:5px auto;} 
#banner_list img {border:0px;} 
#banner_bg {width:705px;position:absolute; color:#fff; bottom:0; background:url(../v2_p_w_picpaths/toumingbar.png);height:38px;z-index:1000;cursor:pointer; line-height:38px; font-size:14px;} 
#banner_info{position:absolute; bottom:0px; left:5px;height:38px; line-height:38px; color:#fff;z-index:1001;cursor:pointer} 
#banner ul {position:absolute;list-style-type:none; ;z-index:1002;margin:0; padding:0; bottom:8px; right:5px;} 
#banner ul li {width:18px; height:18px;float:left;display:block;cursor:pointer; margin:0px auto; background:url(../v2_p_w_picpaths/scropoint.png) no-repeat;overflow:hidden; color:#a3a1a2; font-size:9px; line-height:18px; text-align:center;} 
#banner ul li.on {background:url(../v2_p_w_picpaths/scropoint_on.png) no-repeat; color:#78e927;} 
#banner_list a{position:absolute;

JS部分：

<script type="text/javascript"> 
    var n =0;  
    var t;  
    var count; //定義所需變量 
    $(function(){  
        $("li:first").addClass("on");  //給第一個(gè)按鈕加上選中樣式 
        count=$("#banner_list a").length; //為了讓HTML上的代碼可自動(dòng)循環(huán)就必須定義banner_list下所含圖片的長(zhǎng)度           
        $("#banner_list a:not(:first-child)").hide(); //讓除了不是第一張圖的隱藏掉 
        $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt')); //把圖片的alt屬性的值添加到標(biāo)題欄上去 
        $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")}); //點(diǎn)擊標(biāo)題另開新窗口打開對(duì)應(yīng)鏈接 
        var bli = $("#banner li");  
        bli.each(function(i){ //利用JQuery的遍歷實(shí)現(xiàn)點(diǎn)擊li的時(shí)候自動(dòng)切換到下一張 
            bli.eq(i).click(function(){  
            n = i;  
            $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); 
            $("#banner_list a").filter(":visible").fadeOut(1000).parent().children().eq(i).fadeIn(500); //篩選出所有可見元素，然后取當(dāng)前點(diǎn)擊的fadeOut，其他的fadeIn 
            $(this).addClass("on"); //給所點(diǎn)擊的li加上樣式 
            $(this).siblings().removeAttr("class");  
                }); //移除同級(jí)li的樣式 
            }); 
            t = setInterval("showAuto()", 3000);  
            $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 3000);});  
    }) //設(shè)置自動(dòng)執(zhí)行時(shí)間為3s，利用setInterval自動(dòng)無(wú)限延時(shí)加載，同時(shí)鼠標(biāo)放上去后移除自動(dòng)加載效果，鼠標(biāo)移開后再繼續(xù)執(zhí)行輪播方法。 
  
    function showAuto()  
    {  
        n = n >=count?0 : ++n; //如果n>=圖片總個(gè)數(shù)的話重新賦值為0，也就是從頭算起，達(dá)到自動(dòng)切換到第一張的效果 
        $("#banner li").eq(n).trigger('click'); 
    } //在每一個(gè)匹配的li上綁定觸發(fā)click事件  
</script> 

 現(xiàn)在發(fā)現(xiàn)這個(gè)圖片輪播在谷歌和FF瀏覽器下有bug，就是當(dāng)切換到別的標(biāo)簽頁(yè)的時(shí)候動(dòng)畫停止執(zhí)行了，等你再切換過(guò)來(lái)的時(shí)候會(huì)發(fā)現(xiàn)動(dòng)畫瘋狂執(zhí)行，可能是由于瀏覽器線程處理機(jī)制的問題，解決辦法是在動(dòng)畫執(zhí)行完畢之后加上JQuery的stop方法來(lái)停止被選元素所有加入隊(duì)列的動(dòng)畫，這樣，就算從另外一個(gè)標(biāo)簽頁(yè)切換回來(lái)，他會(huì)先停止執(zhí)行動(dòng)畫，然后再繼續(xù)執(zhí)行。

具體代碼如下：

在showAuto()方法里加上：

1.  function showAuto()  
2.     {  
3. $("#banner_list a").stop(true,true);
4.         n = n >=count?0 : ++n; //如果n>=圖片總個(gè)數(shù)的話重新賦值為0，也就是從頭算起，達(dá)到自動(dòng)切換到第一張的效果 
5.         $("#banner li").eq(n).trigger('click'); 
6.     } 

附上stop方法詳解：

定義和用法

stop() 方法停止當(dāng)前正在運(yùn)行的動(dòng)畫。

語(yǔ)法

$(selector).stop(stopAll,goToEnd)