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 开始。