单击按钮更改阵列中的图片

Change picture in an array with button click

本文关键字：阵列 按钮 单击      更新时间：2024-04-21

我有一个关于数组中图片的问题。我可以点击更改图片，但只能更改一次。这是我的代码和一些示例图片。网上有很多教程，但对我来说可能太复杂了，所以我创建了一个简单的东西。

<html>
<head>
    <script type="text/javascript">
        //here I am creating my array
        var myPicture = [
            "http://www.bildersuche.org/images/logos/pixabay-logo.png",
            "http://www.bildersuche.org/images/logos/123rf-logo.jpg",
            "http://www.java2s.com/style/download.png"
        ]
        // this should be the function and I think here is the error
        function nextPic() {
            myPicture[1] = document.images;
        }
    </script>
</head>
<body>
    <img src="http://www.java2s.com/style/download.png" width="107" height="98" />
    <form>
        <input type="button" onclick="nextPic()" value="Change image">
    </form>
</body>
</html>

简单的问题是，我必须在代码中更改什么才能一键显示第二张、第三张、x图片。或者它有一个简单的jQuery函数吗？

下面是一个工作示例：http://jsbin.com/dubuhizucu/edit?html，控制台，输出

所以有几件事。。

1） 您需要一个变量来跟踪您在pictures数组中的位置。

2） 单击时，从步骤1开始递增该变量。然后，检查它是否大于图片数组的长度。如果是，那么我们需要将其重置回0。

3） 只需将图像上的src属性设置为图片数组中的URL，将索引设置为counter的值即可！

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <img id="target" src="http://www.java2s.com/style/download.png" width="107" height="98" />
  <input type="button" onclick="nextPic()" value="change image" />

    <script>
    var target = document.getElementById('target');
    var counter = 0;
    var myPictures = [
        "http://www.bildersuche.org/images/logos/pixabay-logo.png",
        "http://www.bildersuche.org/images/logos/123rf-logo.jpg",
        "http://www.java2s.com/style/download.png"
    ];
    function nextPic() {
      counter += 1;
      if (counter > myPictures.length -1) {
        counter = 0;
      }
      target.src = myPictures[counter];
    }
  </script>
</body>
</html>

给您的img一个id:id="img1"

创建一个全局变量，例如：

var x = 0;

全局变量是在整个文件的范围内声明的，这意味着它不被任何函数、循环、if语句等包围。您的数组myPicture是全局的。

然后在您的功能中：

function nextPic()

改为写入：

function nextPic(){
    // Increment x by 1, x = x + 1
    x++;
    // Check if on last element of array, change x to first
    if(x >= myPicture.length) {
        x = 0;
    }
    // Use variable, declared as number, to access img in array
    document.getElementById("img1").src = myPicture[x];
}

如果我们不检查x是否大于或等于数组长度，那么一旦我们迭代了每个图像，我们就会尝试访问数组的空值，一个不存在的值。

您的示例的数组长度为3，因此它的索引为0-2。我们无法访问任何大于2的索引，因此我们将x设置回0。

您的nextPic函数有点落后。

每次调用nextPic时，都会将myPicture数组中的第二个元素设置为等于document.images。这不是你想要的。您希望将图像的src（document.images[0]）设置为下一个图像URL，因此需要一种方法来跟踪您正在使用的图像（currentImageIndex）。

下面是一个工作示例：

var myPicture = [
  "http://www.bildersuche.org/images/logos/pixabay-logo.png",
  "http://www.bildersuche.org/images/logos/123rf-logo.jpg",
  "http://www.java2s.com/style/download.png"
];
var currentImageIndex = 0;
function nextPic() {
  currentImageIndex = (currentImageIndex + 1) % myPicture.length;
  document.images[0].src = myPicture[currentImageIndex];
}
<img src="http://www.java2s.com/style/download.png" width="107" height="98" />
<form>
  <input type="button" onclick="nextPic()" value="Change image">
</form>

相关文章：