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文档

巴特西

Jquery 图片走马灯效果原理

最新文章

热门文章