javascript - 显示图像数组中的图像 - Javascript

Question

我的主页上显示了一张大图，当用户单击“next_img”按钮时，主页上的大图应更改为数组中的下一张图片。

但是，点击下一个箭头时没有任何反应，主页上的主图像也没有改变。

我需要在 javascript 中执行此操作。

在 HTML 中:

<!--Main Content of the page -->

<div id="splash">
<img src="images/img/Splash_image1.jpg" alt="" id="mainImg">

</div> 

<div id="imglist">
<a href="javascript:nextImage('mainImg')"><img src="images/next_img.png" alt=""></a>

然后在 javascript 文件中:

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = 'images/img/Splash_image1.jpg';

imgArray[1] = new Image();
imgArray[1].src = 'images/img/Splash_image2.jpg';

imgArray[2] = new Image();
imgArray[2].src = 'images/img/Splash_image3.jpg';

imgArray[3] = new Image();
imgArray[3].src = 'images/img/Splash_image4.jpg';

imgArray[4] = new Image();
imgArray[4].src = 'images/img/Splash_image5.jpg';

imgArray[5] = new Image();
imgArray[5].src = 'images/img/Splash_image6.jpg';

/*------------------------------------*/

function nextImage(element)
{
    var img = document.getElementById(element);

    for(var i = 0;i<imgArray.length;i++)
    {
        if(imgArray[i] == img)
        {
            if(i == imgArray.length)
            {
                var j = 0;
                document.getElementById(element).src = imgArray[j].src;
                break;
            }
            else
            var j = i + 1;
            document.getElementById(element).src = imgArray[j].src;
            break;
        }
    }   
}

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

正如 Diodeus 所说，您正在将 Image 与 HTMLDomObject 进行比较。而是比较它们的 .src 属性:

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = 'images/img/Splash_image1.jpg';

imgArray[1] = new Image();
imgArray[1].src = 'images/img/Splash_image2.jpg';

/* ... more images ... */

imgArray[5] = new Image();
imgArray[5].src = 'images/img/Splash_image6.jpg';

/*------------------------------------*/

function nextImage(element)
{
    var img = document.getElementById(element);

    for(var i = 0; i < imgArray.length;i++)
    {
        if(imgArray[i].src == img.src) // << check this
        {
            if(i === imgArray.length){
                document.getElementById(element).src = imgArray[0].src;
                break;
            }
            document.getElementById(element).src = imgArray[i+1].src;
            break;
        }
    }
}