在Jquery中更改动画后的图像Src

Changing Image Src after animation in Jquery

本文关键字：图像 Src 动画 Jquery      更新时间：2023-09-26

所以我正在制作宝丽来幻灯片效果，我想在Jquery中更改动画后的图像。我试着添加延迟，但也许我做得不对？

这是我的代码，也许你可以帮助找到一种添加过渡图像的方法

Jquery

$(function () { // DOCUMENT ready shorthand
    function polariodSlideshow() {
        $("#polaroid").animate({ opacity: 1, top: 80 }, 1500);
        $("#polaroid").animate({ opacity: 0, top: 250 }, 1800);
        $("#polaroid").animate({ opacity: 0, top: 0 }, 1900, polariodSlideshow);
    }
    polariodSlideshow();
});

HTML

<div id="polaroid" style="position:absolute ;width: 100%; height: -3000px; margin-top: 35px; opacity:0.0"> 
&nbsp;&nbsp;&nbsp; <br /> <br />
<div  style="background-color: #EEEEEE; height:145%; width:40%; box-shadow: 0px 10px 5px #888888; display:inline-block; margin-left: 15%;">
<div id="slideshow">
<img id="centerIMG" src="images/cityscape.jpg"  style=" margin-top:15px; width: 94%; margin-left:3%;" />
</div>
<div style=""> <br /> <br /> </div>
</div>
</div>

我希望在第三个动画之后添加开关，这样回调函数将在动画完成时更改图像后发生。

您只需使用第三个动画中的完成处理程序：

$(function () { // DOCUMENT ready shorthand
    var imgs = ["src1.jpg", "src2.jpg", "src3.jpg", "src4.jpg"];
    var cntr = 0;
    function polariodSlideshow() {
        $("#polaroid").animate({ opacity: 1, top: 80 }, 1500);
        $("#polaroid").animate({ opacity: 0, top: 250 }, 1800);
        $("#polaroid").animate({ opacity: 0, top: 0 }, 1900, function() {
            // change the image here
            var newImg = imgs[cntr % imgs.length];
            ++cntr;
            // use newImg here
            // then kick off the next iteration
            polariodSlideshow();
        });
    }
    polariodSlideshow();
});

如果新的image.src还没有缓存，那么您可能还需要添加等待加载的代码，或者更好的是，确保它是预先缓存的，这样就不会出现问题。

相关文章：