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做这样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以将图像的网址存储在数组中。然后，您可以在按钮单击时设置图像标记的来源。您可以使用计数器“记住”显示的图像。在下面的示例中，我在显示最后一张图像时执行计数器重置（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张图片进行更改

2 个答案: