Javascript 通过onclick事件从6张图片中获取要更改的图片

在继续之前，我必须解释一下，我只做了一周半的代码。无论如何，我试图建立我的第一个网页，但我不知道或找不到一种方法来改变6个按钮每次按下图片

这是我迄今为止的html和javascript代码

这是我的html中唯一相关的部分

<button id="but" onclick="modify_qty(1); picChange();" />Pushy Pushy</button>

<img id="picture" src="pic1.jpg" height="500" width="1365">

---

我认为可能有效的代码跳过了pic2.jpg，因此“帮助”将非常有用。

如果图像都是相同的名称，但末尾的数字不同，那么您可以使用jquery执行以下操作：

i=1；
$（'#but'）。单击（函数（）{
$（'#picture'）.attr（'src'，'pic'+i+'.jpg'）；
console.log（$（'#picture'）.attr（'src'）；
i++；
如果（i==7）{
i=0；
}
});

咄咄逼人
您可以将图像的URL存储在一个数组中。然后，您可以在单击按钮时设置图像标记的来源。您可以使用计数器“记住”显示的图像。在下面的示例中，当显示最后一幅图像时，我执行计数器重置（
counter=0
）


只需将代码粘贴到问题正文中，选择它，然后按ctrl-k。谢谢，但我一点也看不懂。哈哈，我知道它是可行的，但我同意另一个答案，因为它看起来更简单，也很有效，谢谢，tho:）这似乎足够简单，我可以理解，也很有效，谢谢：）
function picChange() {
document.getElementById("picture").src="pic2.jpg";

if (document.getElementById("picture").src="pic2.jpg") {
    document.getElementById("picture").src="pic3.jpg";  
    }
}

var images= [
"http://26.media.tumblr.com/tumblr_lo7izpkVSJ1qcdfs3o1_250.jpg",
"http://28.media.tumblr.com/tumblr_lnqquri96C1qcdfs3o1_250.jpg",
"http://28.media.tumblr.com/tumblr_lmddmmNCAl1qcdfs3o1_250.jpg",
"http://28.media.tumblr.com/tumblr_lmddmky4SR1qcdfs3o1_250.jpg",
"http://24.media.tumblr.com/tumblr_lmddmi79Ek1qcdfs3o1_250.jpg",
"http://28.media.tumblr.com/tumblr_lle7rf5SYi1qcdfs3o1_250.jpg"

]

var img = $('#imgcycle');
var counter= 0;

$('button').on('click', function(){
    if(counter == images.length){
        counter = 0;
    }
    console.log(counter);
    img.attr('src', images[counter]);
    counter++;

})