Question

我通过替换图片HTML标记中的“src”来进行图像转换

<img src="background0.jpg" alt="" id="bg">

问题是：如何为过渡设置动画，例如淡出旧图片并在下一个图片中淡入或向右滑动。

的JavaScript / jQuery的

$(function ($) {
    var images = [
            'background0.jpg',
            'background1.jpg',
            'background2.jpg',
            'background3.jpg'
        ],
        amountOfImages = images.length,
        tempR = 0,
        $bg = $('#bg');

    for (let i = 0; i < amountOfImages; i++) {
        var img = new Image(),src = images[i];
    }

    function fader(){
        let r = Math.floor(Math.random()*amountOfImages);
        $bg.attr('src', images[r]); //TODO: Animate the transition
        tempR = r;
    }
    fader();

    setInterval(fader, 5000);
});

Answer 1

如果你使用jquery，你可以这样做，这样在当前图像淡出后，调用该函数来交换图像源

 function fader(){
     let r = Math.floor(Math.random()*amountOfImages);
     $('#bg').fadeOut(500, function(){
       $bg.attr('src', images[r]); //TODO: Animate the transition
       $('#bg').fadeIn(500);
     tempR = r;
    })
}

如何通过src动画jQuery图像转换

1 个答案: