显示图像阵列中的图像 - 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; 
     } 
    } 
} 

Answer 2

这是你的问题：

if(imgArray[i] == img) 

你的数组元素相对于一个DOM对象。

Answer 3

这是一个稍微干净的方式来实现这个。这会做出以下更改：

1. 代码被干掉了一点以删除多余的重复代码和字符串。
2. 代码更通用/可重用。
3. 我们使缓存成为一个对象，因此它具有自包含的接口，并且有更少的全局变量。
4. 我们比较了.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方法，这多个对象的一些优点：

1. 您可以通过只在数字序列生成的图像，并改变一个数字添加更多图片值，而不是复制更多行数组声明。
2. 只需创建多个imageCache对象，就可以在应用程序中使用这个多个位置。
3. 您可以通过更改一个字符串而不是N个字符串来更改基本URL。
4. 代码尺寸较小（因为删除了重复的代码）。
5. 缓存对象可以很容易地扩展，以提供更多的功能，比如第一个，最后，跳过，等...
6. 您可以添加集中式错误处理在一个地方，所以如果一个不存在图像和不加载成功，它会自动从缓存中删除。
7. 您可以在其他网页上，你只改变参数构造函数，而不是实际上改变的是实现代码重用开发此。

P.S.如果你不知道DRY是什么意思，那就是“不要重复自己”，基本上意味着你永远不应该拥有许多类似代码的副本。任何时候，你都应该将它减少到一个循环或函数，或者不需要大量类似代码的副本。最终的结果会更小，通常更易于维护，并且通常更易于重用。

Answer 4

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

if(i == imgArray.length-1) 

Answer 5

这是一个简单的例子，并尝试将它与你使用一些修改结合起来。我更喜欢你设置在一个阵列中的所有图像，以便使你的代码更易于阅读和更短：

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