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

現在好多帶插件的JQuery焦點圖片效果，一個網站那么多效果就要好多插件，這無疑給網站增加一定的負擔，現在介紹一款不用任何插件，代碼量很少且便于操作的圖片輪播效果，希望有所幫助

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

效果預覽：

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讀心機器人" title="bing讀心機器人" border="0" width="705" height="240"/></a> 
    <a href="#"><img src=" " alt="手機輻射監測器" title="手機輻射監測器" 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里面內容顯示圖片標題
<ul>部分是右下方三個切換圖片的小按鈕
#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");  //給第一個按鈕加上選中樣式 
        count=$("#banner_list a").length; //為了讓HTML上的代碼可自動循環就必須定義banner_list下所含圖片的長度           
        $("#banner_list a:not(:first-child)").hide(); //讓除了不是第一張圖的隱藏掉 
        $("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt')); //把圖片的alt屬性的值添加到標題欄上去 
        $("#banner_info").click(function(){window.open($("#banner_list a:first-child").attr('href'), "_blank")}); //點擊標題另開新窗口打開對應鏈接 
        var bli = $("#banner li");  
        bli.each(function(i){ //利用JQuery的遍歷實現點擊li的時候自動切換到下一張 
            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); //篩選出所有可見元素，然后取當前點擊的fadeOut，其他的fadeIn 
            $(this).addClass("on"); //給所點擊的li加上樣式 
            $(this).siblings().removeAttr("class");  
                }); //移除同級li的樣式 
            }); 
            t = setInterval("showAuto()", 3000);  
            $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 3000);});  
    }) //設置自動執行時間為3s，利用setInterval自動無限延時加載，同時鼠標放上去后移除自動加載效果，鼠標移開后再繼續執行輪播方法。 
  
    function showAuto()  
    {  
        n = n >=count?0 : ++n; //如果n>=圖片總個數的話重新賦值為0，也就是從頭算起，達到自動切換到第一張的效果 
        $("#banner li").eq(n).trigger('click'); 
    } //在每一個匹配的li上綁定觸發click事件  
</script> 

 現在發現這個圖片輪播在谷歌和FF瀏覽器下有bug，就是當切換到別的標簽頁的時候動畫停止執行了，等你再切換過來的時候會發現動畫瘋狂執行，可能是由于瀏覽器線程處理機制的問題，解決辦法是在動畫執行完畢之后加上JQuery的stop方法來停止被選元素所有加入隊列的動畫，這樣，就算從另外一個標簽頁切換回來，他會先停止執行動畫，然后再繼續執行。

具體代碼如下：

在showAuto()方法里加上：

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

附上stop方法詳解：

定義和用法

stop() 方法停止當前正在運行的動畫。

語法

$(selector).stop(stopAll,goToEnd)