从图像阵列显示的图像 - 的Javascript [英] Showing an image from an array of images - Javascript

问题描述

我这是在我的主页显示一个大图片，当用户点击next_img按钮，在主页上大图像应更改为数组中的下一个图像。

I have a large image which is shown on my homepage, and when the user clicks the "next_img" button the large image on the homepage should change to the next image in the array.

然而，当点击下一个箭头不执行任何操作，并在网页主体形象不会改变。

However, the next arrow when clicked does nothing, and the main image on the homepage does not change.

我需要做到这一点在JavaScript。

I need to do this in 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文件：

And then in the javascript file:

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;
        }
    }   
}

任何帮助将是AP preciated。谢谢你。

Any help would be appreciated. Thanks.

推荐答案

正如Diodeus说，你是一个比较图片到 HTMLDomObject 。相反，比较它们的的.src 属性：

Just as Diodeus said, you're comparing an Image to a HTMLDomObject. Instead compare their .src attribute:

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;
        }
    }
}

这篇关于从图像阵列显示的图像 - 的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！