zoukankan      html  css  js  c++  java
  • Jquery 图片走马灯效果原理

    本篇只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑。待会讲解

    照例先上代码:

    HTML:

    复制代码
    <div class="box">        
            <div style=" 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
            {
                 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文档

  • 相关阅读:
    yii 引入文件
    CodeForces 621C Wet Shark and Flowers
    面试题题解
    POJ 2251 Dungeon Master
    HDU 5935 Car(模拟)
    HDU 5938 Four Operations(暴力枚举)
    CodeForces 722C Destroying Array(并查集)
    HDU 5547 Sudoku(dfs)
    HDU 5583 Kingdom of Black and White(模拟)
    HDU 5512 Pagodas(等差数列)
  • 原文地址:https://www.cnblogs.com/pegasus827/p/9672551.html
Copyright © 2011-2022 走看看