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

Answer 2

此外，在检查最后一张图像时，您必须与imgArray.length-1进行比较，因为例如，当数组长度为2时，我将取值0和1，它将不会达到值2，所以你必须比较长度-1而不是长度，这是固定的线：

if(i == imgArray.length-1)

Answer 3

这是一种更简洁的实现方式。这会做出以下更改：

代码被干掉一点，以删除冗余和重复的代码和字符串。
代码更通用/可重用。
我们将缓存变成一个对象，因此它有一个自包含的接口，并且有更少的全局变量。
我们比较.src属性而不是DOM元素，以使其正常工作。

代码：

function imageCache(base, firstNum, lastNum) {
    this.cache = [];
    var img;
    for (var i = firstNum; i <= lastnum; i++) {
        img = new Image();
        img.src = base + i + ".jpg";
        this.cache.push(img);
    }
}

imageCache.prototype.nextImage(id) {
    var element = document.getElementById(id);
    var targetSrc = element.src;
    var cache = this.cache;
    for (var i = 0; i < cache.length; i++) {
        if (cache[i].src) === targetSrc) {
            i++;
            if (i >= cache.length) {
                i = 0;
            }
            element.src = cache[i].src;
            return;
        }
    }
}

// sample usage

var myCache = new imageCache('images/img/Splash_image', 1, 6);
myCache.nextImage("foo");

这种面向对象和DRYed方法的一些优点：

您可以通过在数字序列中创建图像并在构造函数中更改一个数值而不是复制更多的数组声明行来添加更多图像。
只需创建多个imageCache对象，即可在应用中使用多个位置。
您可以通过更改一个字符串而不是N个字符串来更改基本URL。
代码大小较小（因为删除了重复的代码）。
可以轻松扩展缓存对象以提供更多功能，例如first，last，skip等...
您可以在一个位置添加集中式错误处理，这样如果一个图像不存在且未成功加载，它将自动从缓存中删除。
您可以在开发的其他网页中重复使用它，只需更改构造函数的参数，而不是实际更改实现代码。

P.S。如果您不知道DRY代表什么，那就是“不要重复自己”，这基本上意味着您永远不应该拥有许多类似代码的副本。只要你有这个，它应该以某种方式减少到一个循环或函数或某些东西，以消除对许多类似的代码副本的需要。最终结果将更小，通常更容易维护，并且通常更可重复使用。

Answer 4

这是一个简单的示例，并尝试使用一些修改将其与您的组合。我更喜欢将所有图像设置在一个数组中，以使代码更易于阅读和更短：

var myImage = document.getElementById("mainImage");

var imageArray = ["_images/image1.jpg","_images/image2.jpg","_images/image3.jpg",
  "_images/image4.jpg","_images/image5.jpg","_images/image6.jpg"];

var imageIndex = 0; 

function changeImage() {
  myImage.setAttribute("src",imageArray[imageIndex]);
  imageIndex = (imageIndex + 1) % imageArray.length;
}

setInterval(changeImage, 5000);

Answer 5

这是你的问题：

if(imgArray[i] == img)

您正在将数组元素与DOM对象进行比较。

Answer 6

<script type="text/javascript">
function bike()
{
var data=
["b1.jpg", "b2.jpg", "b3.jpg", "b4.jpg", "b5.jpg", "b6.jpg", "b7.jpg", "b8.jpg"];
var a;
for(a=0; a<data.length; a++)
{
document.write("<center><fieldset style='height:200px; float:left; border-radius:15px; border-width:6px;")<img src='"+data[a]+"' height='200px' width='300px'/></fieldset></center>
}
}

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

6 个答案: