如何使用JavaScript在每次點擊圖片時更改圖片標記的URL？

Question

我有一個元素在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];
    }
}

誰能告訴我我的代碼有什么問題或提出更好的方法？

Answer 1

您使用的方法存在多個問題。 看看下面的修改功能。 讓我知道您是否需要任何解釋。

以下代碼將使用包含圖像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運算符的更多信息。