在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();