开发者社区> 问答> 正文

JQuery下实现三张图片的自动播放 . 关于fadeIn()和fadeOut()的较原理的问题

杨冬芳 2016-06-02 20:39:13 1282

  • 无序列表中放入三张图片,想用jquery实现三张图片的自动播放效果:
    html代码如下:
<ul>
    <li style="display:block"><img src="1.jpg"/></li>
    <!-- 在<li>中写了display:none隐藏三张图片.固此处在该图片处写了display:block
    将此张图片显示,作为滚动的开头 -->
    <li><img src="2.jpg"/></li>
    <li><img src="3.jpg"/></li>
</ul>

css代码如下:

    <style type="text/css">
    body{margin:0 auto;background: #000;border: solid 1px red;}
    ul{margin:0px;border: solid yellow 1px;padding:0px;position: relative;}
    li{display: none;border: solid red 1px;width: 750px;height: 500px;margin:0 auto;position:absolute;}
    img{display:inline-block;width:750px;height: 500px;}
    </style>

jquery代码如下:

    <script type="text/javascript">
    $(function(){
        var order = 0;  //order变量用于图片的计数
        var change = setInterval(function(){
            order++;
            if(order == $("li").length){
                order = 0;}
            show(order);
        },3000);
        function show(order){
            $("li").eq(order - 1).fadeOut(600); //将上一张图片隐藏
            $("li").eq(order).fadeIn(600); //将这张图片出现
        };
    })
    </script>

OK,问题出现了(此处,要隐藏的上张图片用a表示,要显示的此张图片用b表示):

Q1 :show(order)方法中,一共写了两条语句。
不是应该顺序执行,将第一条语句执行完成后再执行第二条语句吗?即对a,调用fadeOut()方法调用完后(此时a已经不再占用它的位置),然后执行第二句,调用fadeIn()方法将b在a的位置显示出来吗? .... 但是,实际情况是a在消失的过程中,b在a图片的下方已经占用了位置,开始渐渐的显示了,当a消失后,b图片上去填补上a的位置... fadeIn()与fadeOut()里面的具体细节是什么?产生上述情况的原因是什么?求指教!! ORZ!!
--->如果在

中添加上position:absolute , 在
  • 中添加上position:relative,倒是可以避免出现上述问题,使得
  • 中只显示一张图片,这是为什么?

    Q2 :同一标签(比如此处的

  • 标签)的不同元素的不同index值是怎样产生的?产生的机制是什么?

    Q3:在显示完第三张图片后,应把第三张图片隐藏,然后显示第1张图片。调了很久,只有将order值定为0,即:

    if(order == $("li").length){order = 0;}
    

    才能是第三张图片消失。但是如果order = 0的话,show(order)方法中,eq(order-1)获得的是eq(-1)!!选择器获得的应该是index值为-1的元素吧... 为什么能操作第三张图片?第三张图片的index值不是2吗?难道元素的index值是个循环的?
    希望大家多多指教!!

JavaScript 前端开发
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:25:36

    关于jQuery原理

    jQuery.fn.fadeOut 和 jQuery.fn.fadeIn 都依赖于 jQuery.fn.animate,根本地其实还是使用了 setInterval,将元素的样式 opacity 从1变化到0(或相反),display动画开始时设为 block 结束后为 none(或相反)。如需了解更详细信息请阅读 jQuery 源代码。

    所以,可以把 jQuery.fn.fadeIn 添加到 jQuery.fn.fadeOut 的回调函数去,否则二者是同步的。

    关于position

    对 li 绝对定位后,它们都堆叠到了一起(下面的覆盖上面的),所以看着不会溢出。

    关于index

    index确实是从 0 开始的,第三图的 index 也确实是 2,但你看下jQuery源代码,整理下是这样子:

    eq: function(i){
        var l = this.length;
        var a = i + ( i < 0 ? l : 0 );
        var b = [];
        if(a >= 0 && a < l){
            b.push(this[a]);
        }
        return this.pushStack(b);
    }

    上述代码第三行可以答此疑惑。

    0 0

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程