Question

我已经创建了3个div元素，我需要一组图像，通过在一个框中显示图像，然后是下一个框，然后在无限循环中每隔5秒显示一个图像来逐个移动。< / p>

我希望这些图像一个接一个地淡出（在触发下一个框淡出之前半秒间隙）所以看起来它们是级联渐弱，我希望淡出持续一秒，然后有在该框中的新图像淡入，大约花了一秒钟，然后下一个框触发淡入半秒间隙。

我已经让它们循环，但没有级联，有人可以为我提供问题的解决方案吗？以下是我目前的代码：

<div id="box1"></div><div id="box2"></div><div id="box3"></div>
<script type="text/javascript">
//<![CDATA[
var test = ['img1.jpg','img2.jpg','img3.jpg'];
function loopImages()
{
    // swap image positions in array
    var fimg = test.shift();
    test.push(fimg);
    for (a in test) {
        var newimage = $('<img />').attr('src',test[a]);
        var currbox = $('#box' + (Math.floor(a)+1));
        //first fade out
        currbox.find('img').fadeTo('slow',0);
        // then add new image
        currbox.empty().append(newimage);   
    }
    // loop every 5 seconds
    setTimeout("loopImages()",5000);
}
loopImages();
//]]>
</script>

Answer 1

这样的事情可以解决问题：

var test = ['img1.jpg','img2.jpg','img3.jpg'];
function loopImages() {
    var fimg = test.shift();
    test.push(fimg);
    $.each(test, function(i, img) {
        var newimage = $('<img />').attr('src',img);
        $('#box' + (i+1)).find('img').delay(i*1000).fadeTo('slow',0, function() {
          $(this).html(newimage); //shortcut for .empty().append()
        });
    });
    setTimeout(loopImages, 5000);
}
$(loopImages);

使用.delay()并乘以数组中的索引，您的动画将会错开。此外，您希望在淡入淡出完成后执行更改操作我猜测，在.fadeTo()回调中也是如此。

其他更改：文档准备就绪时运行loopImages，将引用（不是字符串）传递给setTimeout()，并使用传统的for循环进行迭代在数组上（这里不要使用for...in，而是枚举）。

Answer 2

首先尝试使用HTML创建图像，然后使用以下内容：

(function($) {
    $.fn.fadeImages = function(repeatTime, timeBetweenBoxes, boxExistanceTime) {
        var images = this.children('img').hide();
        runFade = function() {
            images.each(function(i) {
                var image = this;
                window.setTimeout(function() { $(image).fadeIn();  }, i * timeBetweenBoxes);
                window.setTimeout(function() { $(image).fadeOut(); }, i * timeBetweenBoxes + boxExistanceTime);
            });
        };
        window.setInterval(runFade, repeatTime);
        runFade();
        return this;
    };
})(jQuery);

jQuery(function($) {
    $('#box1,#box2,#box3').fadeImages(5000, 1000, 1100);
});

调整函数调用中的时间以获得所需的结果。

修改：添加了return this;以使其支持链接。

Answer 3

我必须对Nick的一个很好的解决方案做一些丑陋的黑客攻击，以便它阻止了newimage变量被覆盖的错误，并且总是最后一个循环的结果（i == test.length）似乎消灭了除最后一张之外的所有图像。如果有人比我的黑客有更整洁的解决方案，请随时发布！

<div id="box1"><img src="1.jpg" /></div><div id="box2"><img src="2.jpg" /></div><div id="box3"><img src="3.jpg" /></div>
<script type="text/javascript">
//<![CDATA[
var test = ['1.jpg','2.jpg','3.jpg'];
var imagearr = [];
function loopImages() {
    var fimg = test.pop();
    test.unshift(fimg);
    for (var i=0; i<test.length; i++) {
        var container = '#box' + (i+1);
        imagearr[i] = $(container);
        imagearr[i].find('img').data('count',i).delay(i*400).fadeTo('fast',0, function() {
          var i = $(this).data('count');
          var suffix = (i == 0) ? '' : '_small';
          var newimage = $('<img />').attr('src',test[i]);
          imagearr[i].html(newimage);
          newimage.css('opacity',0).fadeTo('slow',1);
        });
    }
    setTimeout(loopImages, 1000 * test.length + 3000);
}
$(loopImages);
//]]>
</script>

如何在jquery中级联动画

3 个答案: