简化 JavaScript 幻灯片中图像之间的过渡

Question

我正在使用 JavaScript 以定时间隔随机显示一组图像。

这是脚本：

var NumberOfImages = 5

var img = new Array(NumberOfImages)

    img[0] = "[image here]"
    img[1] = "[image here]"
    img[2] = "[image here]"
    img[3] = "[image here]"
    img[4] = "[image here]"

Array.prototype.shuffle = function () {
    var len = this.length;
    var i = len;
    while (i--) {
        var p = parseInt(Math.random()*len);
        var t = this[i];
    this[i] = this[p];
    this[p] = t;
    }
};

img.shuffle ();

var imgNumber = 0

function NextImage() {
    document.images["VCRImage"].src = img[imgNumber++]

        if (imgNumber == img.length) {
               img.shuffle ();
               imgNumber = 0;
        }
}

window.setInterval (NextImage, 3000);

和html：

<div class="item">
    <script type="text/javascript">document.writeln('<img src="'+img[0]+'" name="VCRImage">');</script>
</div>

可在此处找到工作示例：https://jsfiddle.net/admiringtheorchid/esm3u0xg/

我想简化每张图片之间的过渡。如何实现？

Answer 1

用 jQuery 试试这个方法：https://jsfiddle.net/joe_young/qxf69hsL/

//create a jQuery object of the image
    var $image = $(document.images["VCRImage"]);

//fade out the image, and once it has finished fading out... 
    $image.fadeOut(function() {  

//change the image source
        $image.attr("src", img[imgNumber++]);                    
    });

//fade the image back in
    $image.fadeIn();

简化 JavaScript 幻灯片中图像之间的过渡

Ease transition between images in JavaScript slideshow

javascript

css

jquery

slideshow

css-transitions