0

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

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

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

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

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

4

3 回答 3

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>
于 2014-02-10T16:33:04.023 回答
0

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

或者，您可以使用 CSS 动画来实现此效果，因为它们本身支持循环，并且浏览器通常可以更好地优化它们的性能，而不是基于脚本的过渡。然后，您可以检测浏览器对 CSS 动画的支持，如果缺少支持，则回退到 jQuery 过渡。

于 2014-02-10T15:21:35.350 回答
0

这是一个不错的小解决方案 - 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 中删除不透明度。您需要display: none;默认制作图像 2 和 3。

于 2014-02-10T15:23:18.983 回答