javascript - 如何选择数组中的图像进行淡入和淡出

Question

var n=0;
var images=["FullSizeRender (1).jpg","IMG_1875.JPG","IMG_4665.JPG","IMG_5213.JPG"];

$(document).ready(function() {
	
	// Change image
	
	$("#himg").click(function(){
		n++;
		
		if(n==images.length){
			n=0;
		};
		
		document.getElementById("himg").src=images[n];
		
		$("#himg").find('img[src="' + images[n] + '"]').fadeOut();
		$("#himg").find('img[src="' + images[n+1] + '"]').hide().fadeIn();
		
	});

<div class="col-xs-2">
	<div id="handbags">
		<h4>Handbags</h4>
	        <img id="himg" src="FullSizeRender (1).jpg" />
	</div>
</div>

我制作了一个数组，其中图像在单击时发生变化，但我试图使图像在单击时淡入淡出，而不是急剧变化。我尝试使用数组中的索引按源选择图像，但它不起作用。

Answer 1

试试这个:

$(document).ready(function() {
    var n = 0;
    var images = ["FullSizeRender(1).jpg","IMG_1875.JPG","IMG_4665.JPG","IMG_5213.JPG"];
    var image = $('#himg');

    image.on('click', function() {
        var newN = n+1;
        if (newN >= images.length) { newN = 0 };
        image.attr('src', images[n]);
        image.fadeOut(300, function () {
            image.attr('src', images[newN]);
            image.fadeIn();
            n = newN;
        });
    });
});