1

我有这个代码：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() { 
        function loop(){
            $('#picOne').fadeIn(0).fadeOut(8000);
            $('#picTwo').delay(2000).fadeIn(6000).fadeOut(5000);
            $('#picTree').delay(10000).fadeIn(2000).fadeOut(16000);
            $('#picFour').delay(12000).fadeIn(16000).fadeOut(5000);
        }
        loop();
    });
</script>

但是当最后一张图片淡出时，代码不会重复。问题是什么？

4

3 回答 3

7

假设您希望每个元素的动画持续时间相同：

var $elements = $('#picOne, #picTwo, #picTree, #picFour');

function anim_loop(index) {
    // Get the element with that index and do the animation
    $elements.eq(index).fadeIn(1000).delay(3000).fadeOut(1000, function() { 
        // Kind of recursive call, increasing the index and keeping in the
        // the range of valid indexes
        anim_loop((index + 1) % $elements.length);
    });
}

anim_loop(0); // start with the first element

我不确切知道动画应该如何，但我希望它能让概念清晰。

更新：要在一段时间后同时淡出和淡入图像，请在回调中使用setTimeout并调用fadeOut和：anim_loop

$elements.eq(index).fadeIn(1000, function() {
    var $self = $(this);
    setTimeout(function() {
        $self.fadeOut(1000);
        anim_loop((index + 1) % $elements.length);
    }, 3000);
});

演示

于 2013-01-26T13:58:39.833 回答
0

没有问题因为你的函数只被调用一次。

如果你想循环它们，你可以使用setInterval()或setTimeout()

setInterval(function(){loop()}, 16000);

function loop(){
     $('#picOne').fadeIn(0).fadeOut(8000);
     $('#picTwo').delay(2000).fadeIn(6000).fadeOut(5000);
     $('#picTree').delay(10000).fadeIn(2000).fadeOut(16000);
     $('#picFour').delay(12000).fadeIn(16000).fadeOut(5000);

}

或者

function loop(){
     $('#picOne').fadeIn(0).fadeOut(8000);
     $('#picTwo').delay(2000).fadeIn(6000).fadeOut(5000);
     $('#picTree').delay(10000).fadeIn(2000).fadeOut(16000);
     $('#picFour').delay(12000).fadeIn(16000).fadeOut(5000);
 setTimeout(function(){loop()}, 16000);
}

在这两种情况下，函数都会被调用 every 16 seconds = 16000 miliseconds。

于 2013-01-26T13:54:49.793 回答
0

我想说这个功能确实很好用，无论是谁做的，都做得很好。我编辑了演示，它适用于图片。

<div id="picOne">
 <img id="picOne" src="http://www.phphq.net/demos/phAlbum/album/Windows%20Wallpapers/Missing/Waterfall.jpg"/></div>
<div id="picTwo">
<img id="picTwo" src="http://newevolutiondesigns.com/images/freebies/colorful-background-21.jpg"/></div>
<div id="picTree">
 <img id="picTree" src="http://www.phphq.net/demos/phAlbum/album/Windows%20Wallpapers/Missing/Waterfall.jpg"/></div>
  <div id="picFour">
<img id="picFour" src="http://www.photoinpixel.com/mypicture/amazing-background-wallpapers.jpg"/></div>

功能

var $elements = $('#picOne, #picTwo, #picTree, #picFour');

function anim_loop(index) {
    $elements.eq(index).fadeIn(1000, function() {
        var $self = $(this);
        setTimeout(function() {
            $self.fadeOut(1000);
            anim_loop((index + 1) % $elements.length);
        }, 3000);
    }); }

anim_loop(0); // start with the first element
于 2013-08-06T18:54:39.113 回答