单击按钮时如何使用 JQuery 切换图片

Question

我目前的脚本是：

var array = ["heil.jpeg","8bit_12.jpeg","city.jpg"];

$("#next").click(function() {
    $("img").fadeOut(function() {
        for(var i=0; i < array.length; i++) { 
            $(this).attr('src', array[i]).fadeIn(); 
        }
    }); // end fadeOut
});

如何让索引在单击按钮 #next 时选择数组中的下一个元素？

JSFiddle：http://jsfiddle.net/qo5u81dk

Answer 1

你的 li > div 中的 id-s 是倒置的 - 标有 "NEXT" 的按钮有 id="back" 和相反的。在您发布的代码中 $("#next").click(function() 如果您将“#next”替换为“#back”它就可以工作。

Answer 2

您调换了 ID 的 "back" 和 "next"。您还需要正确计算 image-array (drawNum) 的索引并使用它。

 $("#next").click(function() {
  var drawNum = Math.round(Math.random() * (array.length));
  $("img").fadeOut(function() {
    for (var i = 1; i < array.length; i++) {
      $(this).attr('src', array[drawNum]).fadeIn();
    }
  });
});

我稍微修改了你的 jsfiddle，它应该可以工作。

https://jsfiddle.net/qo5u81dk/2/

单击按钮时如何使用 JQuery 切换图片

How to switch picture using JQuery when clicking a button

html

jquery

image

slide