通过onclick事件获取一张图片改变6张图片

Question

在我继续之前我必须解释一下我只做了一个半星期的代码。无论如何，我正在尝试构建我的第一个网页，但我不知道或找不到在每次按下按钮时在 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">

这是 JavaScript 我也在用 jquery

function picChange() {
document.getElementById("picture").src="pic2.jpg";

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

我认为可能有效的代码只是跳过 pic2.jpg 所以帮助会很有帮助。

Answer 1

如果图片都是同名只是末尾编号不同，那么你可以用jquery做这样的事情：

i = 1;
$('#but').click(function() {
  $('#picture').attr('src', 'pic' + i + '.jpg');
  console.log($('#picture').attr('src'));
  i++;
  if (i == 7) {
    i = 0;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="but">Pushy Pushy</button>

<img id="picture" src="pic1.jpg">

Answer 2

您可以将图像的 url 存储在数组中。然后您可以在单击按钮时设置图像标签的来源。您可以使用计数器 "remember" 显示什么图像。在下面的示例中，当显示最后一张图像时，我会重置计数器 (counter = 0)。

JSFIDDLE DEMO

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

})

通过onclick事件获取一张图片改变6张图片

Getting a picture to change through 6 pictures via an onclick event

html

javascript

jquery

image

button