不知道如何让我的过渡循环答案

【问题标题】：Not sure how to have my transition looped不知道如何让我的过渡循环
【发布时间】：2014-07-15 13:23:23
【问题描述】：

我创建了一个小项目，其中有一个图像幻灯片（过渡），在页面加载时，图像不透明度会发生变化，以创建幻灯片效果。

它工作得非常好，但是我很想知道如何升级我的代码，以便它只是循环回到开头，所以幻灯片永远不会结束，非常感谢帮助，这是我尝试过的已经：

$(document).ready(function() {
    $("#image1").fadeTo(2000 , 0, function() {
        $("#image2").fadeTo(2000 , 1, function(){
            $("#image3").fadeTo(3000, 1, function(){

            });
        });
    });
});

http://jsfiddle.net/pYECC/4/

【问题讨论】：

这是我的最新进展：jsfiddle.net/pYECC/6

标签： jquery transition fadeto

【解决方案1】：

<script>       
    var maxImgNum = null;
    var imgT = null;
    var transitionSpeed = 4000;
    var transitionDelay = 600;

    $(document).ready(function(){
        var $slideshowImgs = $("#anim_cont").find("img");
        var maxImgNum = $slideshowImgs.length;
        $slideshowImgs.each(function(i, obj){
            $(obj).css("z-index", maxImgNum - i);
    });
    imgT = window.setTimeout(function(){animateSlideshow()},transitionSpeed);          
});

function animateSlideshow(){

    $(".anim")
        .eq(0)
            .fadeOut(transitionDelay, function(){
                $(this).appendTo("#anim_cont")
                $(".anim").each(function(i, v){
                    $(this)
                        .css("z-index", maxImgNum-i)
                        .css("display", "block");
                })
                imgT = window.setTimeout(function(){animateSlideshow()}, transitionSpeed);

            });
}
</script>




<div id="anim_cont">
    <img src="http://eclipse-developers.com/download.jpg" id="image1" class="anim"/> 
    <img src="http://eclipse-developers.com/download2.jpg" id="image2" class="anim"/> 
    <img src="http://eclipse-developers.com/download3.jpg" id="image3" class="anim"/> 
</div>

【讨论】：

这创造了一个很好的变形效果，从一个图像过渡到另一个图像。这是一种在 Google 和 Apple 创建的许多页面上使用的技术。它还有很多好处，例如不直接引用图像本身。因此，您可以将 JS 分离到另一个文件中并缩小它，而不必担心将来需要添加或减少幻灯片。其次，它允许低级程序员或设计人员轻松更新页面。在此解决方案中，您还需要删除 css 中的“不透明度”引用。
是的，它很好，但遗憾的是它不符合我的需要，请看一下此链接上的第一张幻灯片：www.teamgeek.co.za/ 看看它是如何消失的？这样旧图像的一部分就被合并了，看起来像一个过渡，而不是只有一个图像消失然后另一个图像进来。
熊猫你一定没试过代码。这正是发生的情况，一个图像淡出而另一个淡入 - 看起来好像它们在短时间内合并了。这是谷歌、苹果和其他主要网站使用的方法。除了我已经列出的其他好处之外，如果您选择创建一个包含 100 个元素的幻灯片，您可以一次异步加载一些，对我上面的代码进行轻微修改。这样就不必使用大量内存来一次存储所有图像。相信我，这是要走的路——你应该试试。
window.setTimeout(function(){animateSlideshow()}, transitionSpeed) 可以在两次使用时都更改为window.setTimeout(animateSlideshow, transitionSpeed)。你不需要匿名函数。
是的 mcrumley 是正确的，最初我在 anon 函数中有其他代码，我应该放那个快捷方式。如果有人对此代码进行了修改并需要传入一些参数，可能仍然有用。感谢您指出这一点。

【解决方案2】：

这是一个不错的小解决方案 - http://jsfiddle.net/pYECC/7/

$(document).ready(function() {
    var images = ["image1", "image2", "image3"];
    var x = 0;

    setInterval(function () {
        $("#" + images[x]).fadeOut(1000, function () {
            x++;
            if(x == 3)
                x = 0;
            $("#" + images[x]).fadeIn(1000);
        });
    }, 3000);  
});

这样，您需要从 CSS 中移除不透明度。您需要将图像 2 和 3 默认设置为 display: none;。

【讨论】：

嘿，谢谢这个解决方案，但是我有一些问题，首先它似乎出于某种原因从第三张图像开始，以及它在更改图像时的顺序似乎也错了，它来自 image3> image1> image2。最后，它似乎在图像 3 上停留的时间比其他图像长得多。这是更新的链接：jsfiddle.net/pYECC/12
查看更新，您需要使图像 2 和 3 不显示 - jsfiddle.net/pYECC/13
好的，谢谢，你能解释一下这是怎么循环的吗？我真的不明白..

【解决方案3】：

您可以将所有幻灯片转换包装到一个函数中，然后将该函数作为回调传递给最后一个转换。这将导致它无限循环。

或者，您可以使用 CSS 动画来实现这种效果，因为它们本身就支持循环，并且浏览器通常可以更好地优化它们的性能，而不是基于脚本的过渡。然后，如果缺少支持，您可以detect browser support for CSS animations 并回退到 jQuery 转换。

【讨论】：