如何使用JavaScript在每次点击图像时更改图像标签的URL

How to change the URL of an image tag on every click on the image using JavaScript?

本文关键字：图像 标签 URL JavaScript 何使用      更新时间：2023-09-26

我有一个在HTML页面上显示图像的元素。这个元素的来源是JavaScript数组中许多不同图像中的一个。我已经有了一个循环浏览图像、创建幻灯片效果的脚本，但现在我想用按钮手动浏览图像。

到目前为止，这是我的代码，但单击按钮时没有得到任何响应。

function nextup() 
{
    imgs = []; 
    imgs[0] = "/snakelane/assets/images/thumb/_1.jpg";  imgs[10] = "/snakelane/assets/images/thumb/_19.jpg"; 
    imgs[1] = "/snakelane/assets/images/thumb/_2.jpg";  imgs[11] = "/snakelane/assets/images/thumb/_20.jpg"; 
    imgs[2] = "/snakelane/assets/images/thumb/_3.jpg";  imgs[12] = "/snakelane/assets/images/thumb/_21.jpg";
    imgs[3] = "/snakelane/assets/images/thumb/_4.jpg";  imgs[13] = "/snakelane/assets/images/thumb/_22.jpg";
    imgs[4] = "/snakelane/assets/images/thumb/_5.jpg";  imgs[14] = "/snakelane/assets/images/thumb/_23.jpg";    
    imgs[5] = "/snakelane/assets/images/thumb/_6.jpg";  imgs[15] = "/snakelane/assets/images/thumb/_24.jpg";
    imgs[6] = "/snakelane/assets/images/thumb/_7.jpg";  imgs[16] = "/snakelane/assets/images/thumb/_25.jpg";
    imgs[7] = "/snakelane/assets/images/thumb/_8.jpg";  imgs[17] = "/snakelane/assets/images/thumb/_26.jpg"; 
    imgs[8] = "/snakelane/assets/images/thumb/_9.jpg";  imgs[18] = "/snakelane/assets/images/thumb/_27.jpg";
    imgs[9] = "/snakelane/assets/images/thumb/_32.jpg"; imgs[19] = "/snakelane/assets/images/thumb/_28.jpg"; 
    var pic = document.getElementById("picbox");
    for(i =0; i < imgs.length; i++) {
        var current = indexOf(pic.src);
        var next = Math.round(current + 1);
        pic.src = imgs[next];
    }
}

有人能告诉我我的代码出了什么问题，或者提出更好的方法吗？

您使用的方法中存在多个问题。看看下面修改后的函数。如果你需要解释什么，请告诉我。

下面的代码将使用一个包含图像URL的数组，然后在单击时按顺序分配给img标记。享受

在这里，您可以尝试查看输出。

function nextup(){
 //Initialized img array with 10 images, you can do it any way you want to.
 var imgs = []; 
 for(i=0;i<10;i++){
      imgs[i] = "http://lorempixel.com/output/cats-q-c-100-100-"+(i+1)+".jpg";
 }    
 //Fetch the pic DOM element by ID
var pic = document.getElementById("picbox");
//Know what is position of currently assigned image in array.
 var current = imgs.indexOf(pic.src);
 var next = 0; 
 //Handle case if no image is present, the initial case.
 if(current!=-1){
  next = (current + 1)%(imgs.length);
 }
 //Assign the next src
 pic.src = imgs[next];
}
//Scoped outside to call the function first time on load.
nextup();

我在你的代码中发现了以下问题：

  1. 您尝试使用indexOf，但没有指定必须在其中执行搜索的数组。想象一下，一位校长要求某人去看看约翰是否在教室里，但没有指定具体的教室
  2. 对于遍历数组，您使用了一个next变量，如果您需要一个无休止的循环，这可能是一个好主意。但在这里，由于我们被限制为10或20个图像，我们需要确保如果当前选择的图像是最后一个，我们会发现next变为21（假设总共有20个图像），这将试图访问一个越界的变量

因此，我使用了mod运算符%。为了在JavaScript中参考，5%10将返回5，15%10将返回5，依此类推。点击此处了解有关mod运算符的更多信息。

相关文章：