Javascript 如何在单击时将图像更改为其他图像

我们目前正在支架（ch项目）内创建图像，如下所示：

<div class="ch-item ch-img-1"><img src="/images/image1.jpg" alt="" />

我们在使图像显示时遇到问题。为我们缺乏理解而道歉。Javascript不是我们的强项

如果可能的话，我们还希望在单击时将此图像更改为另一个图像，并总共重复此过程六次，因此每次单击它时，它都会更改为另一个图像

我们将非常感谢任何帮助。谢谢大家!

JS小提琴示例：

注意：在本例中，您可以通过添加/删除

images

数组的路径（目前有3个）来扩展要循环的图像数量

HTML

<div class="ch-item ch-img-1">
   <img src="http://nycgfx.com/shawnmartinbrough/galleries/content/00_start/02_SequentialArt/SEQUENTIAL-World%20War%20HULK-2.jpg" alt="" />
</div>

JS

var i = 1;
$('img').click(function() {
    var images = [    "http://nycgfx.com/shawnmartinbrough/galleries/content/00_start/02_SequentialArt/SEQUENTIAL-World%20War%20HULK-2.jpg",
    "http://motorcitytimes.com/mct/wp-content/uploads/2013/10/sequential-photos-2-880x288.jpg",
    "http://www.gearlicio.us/wp-content/uploads/s3/1476-110621238-vintage-1970s-sequential-circuits-prophet-5/IMG_3317-2.jpg"];

    $(this).attr('src', images[i]);
    if (i < images.length) {
        i++;
    }
});

var i=1；
$（'img'）。单击（函数（）{
变量图像=[”http://nycgfx.com/shawnmartinbrough/galleries/content/00_start/02_SequentialArt/SEQUENTIAL-World%20War%20HULK-2.jpg“，
"http://motorcitytimes.com/mct/wp-content/uploads/2013/10/sequential-photos-2-880x288.jpg",
"http://www.gearlicio.us/wp-content/uploads/s3/1476-110621238-vintage-1970s-sequential-circuits-prophet-5/IMG_3317-2.jpg"];
$（this.attr（'src'，images[i]）；
if（i

不使用jQuery，您可以这样做

<div class="ch-item ch-img-1"><img src="./images/image1.jpg" alt="" id='img'/></div>
<script type='text/javascript'>
    var images = ['./images/image1.jpg','./images/image2.jpg','./images/image3.jpg'];
    var i = 0;
    var tagImg = document.getElementById('img');
    tagImg.onclick = function() {
        this.src = images[++i % images.length];
    }
</script>

var images=['./images/image1.jpg'，'./images/image2.jpg'，'./images/image3.jpg']；
var i=0；
var tagImg=document.getElementById（'img'）；
tagImg.onclick=函数（）{
this.src=images[++i%images.length]；
}

---

您可以向数组中添加任意数量的图像。

div不应影响img的显示，除非有CSS阻止它这样做。请发布您当前的CSS和Javascript以供审阅。另外，不确定是否是，只是省略了它，但您没有结束div标记。欢迎使用Stackoverflow。在提出问题之前，请做一些调查。此外，虽然这是一个问答网站，但我们建议您在提问之前尽一切努力解决问题，这应该是您的最后手段。此外，您是否检查了

/images/image1.jpg

中的文件是否存在？这太棒了。谢谢我们遇到的唯一问题是偶尔从数组中没有绘制图像，但我想这是我们这边的问题吗？@Joe使用firefox和firebug插件查找类似的bug非常有用。您只需单击firebug按钮，然后单击console标签，然后刷新页面，就可以看到错误发生的原因。让我们来看看。