Jquery 圖片走馬燈效果原理

本篇只講解水平走馬燈效果，垂直向上走馬燈效果不講解，原理一樣，但是水平走馬燈效果有一個小坑。待會講解

照例先上代碼：

HTML：

<div class="box">        
        <div style="width: 1000px;" id="boxdiv">
            <ul>
                <li style="display: block;" title="晚霞中的民航飛機"><a href="#">
                    <img src="http://5.26923.com/download/pic/000/337/f2418c0850058ff9edb2bb85e30be1cb.jpg" /></a></li>
                <li title="波音787"><a href="#">
                    <img src="http://5.26923.com/download/pic/000/337/8d96f0fc8a9f2f9e5af628ec4b9ef64e.jpg" /></a></li>
                <li title="一起去旅行"><a href="#">
                    <img src="http://5.26923.com/download/pic/000/338/14533ca737e6b63c0abe3ee4dc22b6a4.jpg" /></a></li>             
            </ul>
        </div>
    </div>

在<div class="box">中，再包含了一個div，且設置了一個很比較大的寬度，是為了解決一個在垂直走馬燈下沒有的坑。該坑的效果是在li標簽float為left的情況，不要里面的DIV，會出現圖片輪播后，顯示中的最后一張圖片由下向上的跳動效果，這是float的本身特性造成的，因為父元素寬度不夠的情況下，后面的元素會自動往下左沉下去，一旦上面寬度夠了，就會自動飄上來，這個飄就會造成顯示中的最后一張圖片的跳動效果，所以采用內部嵌套一個DIV 並設置<div class="box">的overflow CSS樣式來解決該問題。

CSS:

.box
        {
            width: 800px;
            height: 200px;
            margin-top: 100px;
            margin-left: 100px;
            overflow: hidden;
        }

            .box img
            {
                border-style: none;
                height: 200px;
            }

            .box ul
            {
                margin: 0px;
                padding: 0px;
                list-style-type: none;
            }

                .box ul li
                {
                    float: left;
                }

腳本：

<script type="text/javascript">
        $(document).ready(function () {
            new ZouMa().Start();
        });
        function ZouMa() {
            this.maxLength = 3; //最低顯示數           
            this.Timer = 2000;//計時器間隔時間
            this.Ul = $(".box ul");

            var handId;//計時器id
            var self = this;
            this.Start = function () {
                if (self.Ul.children().length < this.maxLength) {
                    self.Ul.append(self.Ul.children().clone());
                }
                handId = setInterval(self.Play, self.Timer);
            }
            this.Play = function () {
                var img = self.Ul.children().eq(0);
                var left = img.children().eq(0).width();
                img.animate({ "marginLeft": (-1 * left) + "px" }, 600, function () {
                    //appendTo函數是實現走馬燈一直不間斷播放的秘訣。
                    //目前網上看到的很多走馬燈，走到最后一張的時候，會立馬閃回第一張，而不是繼續從后往前推進，即是沒有明白該函數的作用的原因
                    $(this).css("margin-left", "auto").appendTo(self.Ul);
                });
            }
        }
    </script>

此處照例使用了jquery的動畫效果函數animate來實現走馬燈效果，並配合appendTo函數來實現無盡播放的效果。

有關appendTo函數的作用請參閱jquery的API文檔，animate也請參閱API文檔