jQuery 在按下按钮时循环浏览图像

Question

完全是编码方面的新手，所以提前道歉，但我对这个问题很生气！

手头的任务

我试图让 jQuery 在无限循环中单击按钮时循环浏览一组图像。

到目前为止我已经得到了以下内容，但我在我的逻辑中找不到任何漏洞，但它似乎不起作用。如果有人可以快速浏览一下并把它全部放入一个可用的 jsfiddle 中，我将不胜感激！

      $(document).ready(function() { 
      $(“#button”).click(function() {

    var src = $('#myimage').attr('src');

    //if the current image is picture1.png, change it to picture2.png
    if(src == 'pic1.png') {
        $("#myimage").attr("src","pic2.png");

    //if the current image is picture2.png, change it to picture3.png 
    } else if(src == "pic2.png") {
        $("#myimage").attr("src","pic3.png"); 

    //if the current image is anything else, change it back to picture1.png
    } else {
        $("#myimage").attr("src","pic1.png");
    }
});

更新我想我的实际 fiddle 可能做错了什么？ https://jsfiddle.net/pj2wvcdx/

Answer 1

这是一个工作示例。这一切都基于您的代码，我唯一改变的是您对 "#button" 使用了错误的引号，但这可能是复制粘贴的事情？而且你没有关闭 click 功能。

$(document).ready(function() { 
  $("#button").click(function() {
    var src = $('#myimage').attr('src');

    //if the current image is picture1.png, change it to picture2.png
    if(src == 'http://www.libpng.org/pub/png/PngSuite/f01n2c08.png') {
        $("#myimage").attr("src","http://www.libpng.org/pub/png/PngSuite/f02n2c08.png");

    //if the current image is picture2.png, change it to picture3.png 
    } else if(src == "http://www.libpng.org/pub/png/PngSuite/f02n2c08.png") {
        $("#myimage").attr("src","http://www.libpng.org/pub/png/PngSuite/f03n2c08.png"); 
    //if the current image is anything else, change it back to picture1.png
    } else {
        $("#myimage").attr("src","http://www.libpng.org/pub/png/PngSuite/f01n2c08.png");
    }
    console.log("Src is: " + $("#myimage").attr("src"));
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" >Cycle</button>
<img src="http://www.libpng.org/pub/png/PngSuite/f01n2c08.png" id="myimage"/>

您的代码段中的错误是您永远不会从 1 -> 2 开始。

jQuery 在按下按钮时循环浏览图像

jQuery to cycle through images on button press

jquery

loops

image

buttonclick

手头的任务