单击时更改图像（6图像循环）

我有6张图像需要通过点击图像进行交换，但似乎无法获得正确的代码以便进入下一张图片单击时更改图像（6图像循环）

HTML

<img src="BCover.jpg" id="ImgGallery" onclick="ImgGallery()"/>

的JavaScript

var counter = 1; 

ImgGallery.onclick = function(){ 
if (counter == 1){ 
    document.getElementById("ImgGallery").src = "BCover.jpg"; 
    counter++; 
} 
else if (counter == 2){ 
    document.getElementById("ImgGallery").src = "MechGP.jpg"; 
    counter++; 
} 
else if (counter == 3){ 
    document.getElementById("ImgGallery").src = "Mech2.jpg"; 
    counter++; 
} 
else if (counter == 4){ 
    document.getElementById("ImgGallery").src = "Mech3.jpg"; 
    counter++; 
} 
else if (counter == 5){ 
    document.getElementById("ImgGallery").src = "Mech4.jpg"; 
    counter++; 
} 
else if (counter == 6){ 
    document.getElementById("ImgGallery").src = "MCA1.png"; 
    counter==1; 
} 
};

来源

2015-10-07 Aaron Macaulay

注意分配是'='。还有什么不在这个代码工作，任何错误？有一个更简单的方法来做到这一点，但固定后==“。 [它似乎没有问题]（http://jsfiddle.net/caxw4vrc/）。 –

当我点击图片时，它不会切换到下一张图片。 –

是的，看看小提琴。请注意，您想将'ImgGallery'更改为'document.getElementById（“ImgGallery”）'，因为“ImgGallery”在所有的broswers中都不起作用。 –

的问题（比斯宾塞的评论AB等out == assignment）似乎是ImgGallery应该是一个函数的名称，而不是对元素的引用，因为它被称为img元素的onclick属性中的函数。

我将ImgGallery()函数更名为rotateGallery以消除元素id的歧义。

我也花了一些自由来清理你的代码，通过使用数组循环而不是switch语句来处理img库旋转。

<img src="BCover.jpg" id="ImgGallery" onclick="rotateGallery()"/> 


var counter = 0, 
    gallery = ["BCover.jpg", "MechGP.jpg", "Mech2.jpg", "Mech3.jpg", "Mech4.jpg", "MCA1.png"], 
    rotateGallery = function() { 
     document.getElementById("ImgGallery").src = gallery[counter]; 
     counter++; 
     if (counter >= gallery.length) { 
      counter = 0; 
     } 
    };

来源

2015-10-07 02:50:12

*“ImgGallery应该是一个函数的名称，因为它在onclick中引用”* - 实际上它可以（可以）使用** id引用该元素* *'ImgGallery'。 –

但他已经在元素中创建了一个'onclick'属性。所以他的意图似乎是定义一个旋转图像的函数。 –

我同意，OP未知可能会为其元素设置一个工作的“onclick”。 –

这可以干掉一点。您可以将所有图像包含在数组中。 JavaScript没有原生的方法，但可以使用以下算法实现它。

var images = ["BCover.jpg", "MechGP.jpg", "Mech2.jpg", "Mech3.jpg", "Mech4.jpg", "MCA1.png"]; 
var gallery = document.getElementById("ImgGallery"); 
var index = 0; 

gallery.addEventListener("click", function() { 
    gallery.src = images[index]; 
    index = (index === images.length - 1) ? 0 : index + 1; 
});

我知道click监听器里的最后一条语句似乎不可思议，但我想写尽可能少的代码越好。

来源

2015-10-07 02:52:38

很好的答案。看起来非常熟悉。 “ImgGallery”需要一个资本“我”。 –

这是解决'array＃cycle'问题的常用算法。但是，我们都有同样的想法。并感谢您指出拼写错误。我没有注意到 –

ImageGallery不是一个会导致错误的函数。

但是，主要错误是counter==1;，在第三行。 ==运算符用于测试值是否具有相同的值（虽然不一定是相同的类型），但对于赋值，使用正常的=运算符。试试这个：

//First, create an array of images (so you can support as many images in the gallery as needed, only needing to update this array) 
 
var images = ["BCover.jpg", "MechGP.jpg", "Mech2.jpg", "Mech3.jpg", "Mech4.jpg", "MCA1.png"], 
 
    //and a counter to loop through 
 
    c = 0; 
 

 
//this function is triggered when the image is clicked on sending the image element as a parameter 
 
function nextImg(elem){ 
 
    //if c is less than the array's length - 1, then add 1 to c, otherwise make c equal 0 
 
    c = (c != images.length - 1) ? c + 1 : 0; 
 
    //actually change the src attribute of the image 
 
    elem.src = images[c]; 
 
    //and just let you know what image you're up to 
 
    document.getElementsByTagName('p')[0].innerHTML = 'Image no. '+(c+1)+'. File name of image: '+images[c]; 
 
}

/* Make the image visible */ 
 
img{ 
 
    cursor: pointer; 
 
    height: 50px; 
 
    width: 50px; 
 
}

<img id='ImageGallery' onclick='nextImg(this)' /> 
 
<p>Notice the onclick attribute</p>

来源

2015-10-07 02:58:36 Tobsta

* ImageGallery是undefined *不是真的，在这种情况下它使用** id **'ImageGallery'引用元素。 –

@SpencerWieczorek它是未定义的。我在提供的代码中引用了第3行。 – Tobsta

如果没有在JavaScript中直接定义，大多数浏览器（和现代浏览器）都会将'ImageGallery'解释为对具有'ImageGallery'的id或名称的元素的引用。 –

单击时更改图像（6图像循环）

回答

相关问题