Jquery的三輪播效果

今天研究下Jquery的三輪播效果 寫了一個簡單的出來 現在還沒有用元件封裝 我今天這個輪播是向上的 一直向上的 本來是想研究個元件出來 想寫兩個函數 一個函數是向上滾動 另一個是向左滾動 當我調用第一個函數時候 讓他向上 同理 當我調用第二個函數時候 讓他向左滾動 但是由于待會想看看電視 現在就沒有封裝 以後有機會再封裝下吧 恩 今天這個Jquery寫的效果也是蠻簡單的 廢話不多說 看看下面效果圖：

<a target="_blank" href="http://blog.51cto.com/attachment/201111/212021525.jpg"></a>

 這樣的效果也是看得很多 其實原理很簡單 HTML結構和CSS代碼也是非常重要的 因為我是用了 ul li這樣的标簽寫的 而我剛開始沒有用display：inline這樣的 在IE6 7下是有問題的 很納悶 然後再仔細看看源碼 才發現 少了這個！

下面HTML代碼

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; 

&lt;html&gt; 

    &lt;head&gt; 

        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; 

        &lt;title&gt;Untitled Document&lt;/title&gt; 

&lt;style type="text/css"&gt; 

body,div,ul,li{ margin:0; padding:0;}  

.container{ width:400px; height:300px; overflow:hidden; position:relative; margin:50px auto 0;}  

.slider{ position:absolute;}  

.slider li{ list-style:none; width:400px; height:300px; overflow:hidden; display:inline;}  

.slider img{ width:400px; height:300px; overflow:hidden; border:none; display: block;}  

.slider li a{ width:400px; height:300px; overflow:hidden; display:block;}  

.num{ position:absolute; right:5px; bottom:5px; z-index:100;}  

.num li{ float:left; color:#FF7300; height:16px; display:inline; line-height:16px; text-align:center; font-size:12px; font-family:Verdana, Geneva, sans-serif; overflow:hidden; margin:3px 1px; background-color:#fff; border:1px solid #FF7300; cursor:pointer; width:16px;}  

.num li.on{ color:#fff; width:21px; height:21px; line-height:21px; font-size:16px; margin:0 1px; border:0; background:#FF7300; font-weight:700;}  

&lt;/style&gt; 

    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt; 

    &lt;/head&gt; 

    &lt;body&gt; 

        &lt;div class="container"&gt; 

            &lt;ul class="slider"&gt; 

                &lt;li&gt;&lt;a href="#" target="_blank"&gt;&lt;img  src="images/01.jpg" alt=""/&gt;&lt;/a&gt;&lt;/li&gt; 

                &lt;li&gt;&lt;a href="#" target="_blank"&gt;&lt;img  src="images/02.jpg" alt=""/&gt;&lt;/a&gt;&lt;/li&gt; 

                &lt;li&gt;&lt;a href="#" target="_blank"&gt;&lt;img  src="images/03.jpg" alt=""/&gt;&lt;/a&gt;&lt;/li&gt; 

            &lt;/ul&gt; 

            &lt;ul class="num"&gt; 

                &lt;li&gt;1&lt;/li&gt; 

                &lt;li&gt;2&lt;/li&gt; 

                &lt;li&gt;3&lt;/li&gt; 

                &lt;li&gt;4&lt;/li&gt; 

        &lt;/div&gt; 

        &lt;script type="text/javascript" src="JqueryMarquee.js"&gt;&lt;/script&gt; 

    &lt;/body&gt; 

&lt;/html&gt; 

JS代碼：

/**  

 * @author tugenhua  

 * @email [email protected]  

 * Jquery三輪播圖檔效果  

 */ 

$(function(){  

    $(".num li:first").addClass("on");  

    var len = $(".num li").length,  

        index = 0,  

        timer = null;  

        $(".num li").mouseover(function(){  

            var index = $(".num li").index(this);  

            showImg(index);  

        });  

        $(".container").hover(function(){  

            clearInterval(timer);  

        },function(){  

            timer = setInterval(function(){  

                showImg(index);  

                index++;  

                if(index==len) index=0;  

            },3000);  

        }).trigger("mouseleave");  

})  

function showImg(index){  

    var addHeight = $(".container").height();  

    $(".slider").stop(true,false).animate({top : -addHeight*index},1000);  

    $(".num li").removeClass("on")  

    .eq(index).addClass("on");        

}  

首先寫這個結構時候 要注意下面幾個問題：

1 用了ul li時候 一定要記得用display：inline這個

2 我在寫樣式時用了個技巧  就是讓滾動的圖檔的外框也就是父級元素 給他個絕對定位，目的是讓所有的圖檔重疊在一起 這樣就可以實作一張一張的輪播。

3 當然給了一個目前的類 當播放到那個li時候 讓他變寬！文字變色等等！！

4 js 就是說視窗一打開時候 讓他目前播放在第一個 是以用了這句代碼：$(".num li:first").addClass("on"); 然後擷取目前的數字 1 2 3 4的數量 定義目前的索引index 當我滑鼠移到任何一個li時候 我想擷取目前的索引 用這個 showImg(index) 調用外面的函數 在這個函數内 首先要知道這個圖檔的外框的高度 接着就讓他動畫 高度×目前的索引！

5.當我滑鼠停在那一整塊的時候 我想讓他正在播放停下來，當我滑鼠移開那一塊的時候 讓它觸發一個離開事件，判斷如果目前的index大于或者等于數字的最大長度時候 讓index傳回第一張圖！

下面添加個附件 不明白的地方 可以下載下傳看看 看看代碼 看看效果 了解下 就明白了 相容IE6 7 8 火狐 谷歌等待主流遊覽器！！

<a href="http://down.51cto.com/data/2359353" target="_blank">附件：http://down.51cto.com/data/2359353</a>

本文轉自 塗根華 51CTO部落格，原文連結：http://blog.51cto.com/tugenhua/723888，如需轉載請自行聯系原作者