替換IMG SRC屬性瓦特/ jQuery不工作

我想創建簡單的幻燈片，如果我點擊圖像，它會變成下一個圖像。到目前爲止，我在一個名爲1-4的子文件夾中有四個圖像（例如：1.jpg，2.jpg，3.jpg，4.jpg）。我已經設置了一個計數器（變量imgcounter），以便如果它大於4，它將重置爲1，並使用此計數器輕鬆更改img元素的src名稱。替換IMG SRC屬性瓦特/ jQuery不工作

簡單的版本：

$(document).ready(function() { 
var imgcounter = 1; 
$('#slide img').each(function() { 
    $(this).click(function() { 
     if(imgcounter <= 4) { 
      imgcounter++; 
      $(this).attr('src', 'images/' + imgcounter + '.JPG'); 
     } // end if 
     else { 
      var imgcounter = 1; 
      $(this).attr('src', 'images/' + imgcounter + '.JPG'); 
     } // end else 
    }); // end click  
}); // end each 
}); // end ready

在這個版本中，如果我點擊它的圖像也不會改變。

我也試過這個更復雜的方法，我放了一個變量來定義我想用什麼替換源。我不確定我是否正確使用replace（）函數，特別是在我使用雙撇號''來指示我想要替換整個src的部分。我也不確定是否我合法地寫出了replace（）函數的第二部分 - 'images /'+ imgcounter +'.JPG'。

$(document).ready(function() { 
var imgcounter = 1; 
$('#slide img').each(function() { 
    var imgFile = $(this).attr('src'); 
    var preloadImg = new Image(); 
    $(this).click(function() { 
     if(imgcounter <= 4) { 
      imgcounter++; 
      preloadImg.src = imgFile.replace('', 'images/' + imgcounter + '.JPG'); 
      $(this).attr('src', preloadImg.src); 
     } // end if 
     else { 
      var imgcounter = 1; 
      preloadImg.src = imgFile.replace('', 'images/' + imgcounter + '.JPG'); 
      $(this).attr('src', preloadImg.src); 
     } // end else 
    }); // end click  
}); // end each 
}); // end ready

在這個版本的圖像改變，但我得到一個破碎的形象符號和錯誤控制檯上寫着：無法加載資源文件：///。（拿出完整路徑）../圖像/ 1 .JPGimages/1.JPG 我不知道爲什麼它無法取代整個源代碼，而是似乎只在源末追加源名的副本...

感謝您提前提供任何幫助！

來源

2012-07-16 LazerSharks

嗯在第一個版本，如果我把「var imgcounter = 1;」在click（）函數下方，第一次點擊起作用，圖像發生變化。但是，如果我再次單擊圖像，它將不會移動到下一個圖像。 – LazerSharks 2012-07-16 01:29:04

你並不需要'.each（）'函數。另外，你在'else'塊中重新聲明變量'imgcounter'。 – ahren 2012-07-16 01:31:10

嗯你是對的。沒有抓住那個。如果我有多個圖像元素，我需要一個each（）函數嗎？ – LazerSharks 2012-07-16 01:45:55

我會做這樣的事情：

var imgcounter = 1; 

$("#slide img").click(function(e){ 
    if(imgcounter < 4){ 
     imgcounter++; 
    }else{ 
     imgcounter = 1; 
    } 
    $(this).attr("src", "images/"+imgcounter+".jpg"); 
});

它添加了處理程序，以每img內#slide無論如何，所以沒有必要爲each()功能，它看起來會更加清晰。此外，刪除多餘的電話$(this).attr()。

來源

2012-07-16 01:33:26 ahren

哇，完美的工作，代碼是如此簡單！除了我不認爲「e」應該在函數（）中？謝謝！ – LazerSharks 2012-07-16 01:44:23

'e'是自動傳遞給處理程序的事件對象。如果您真的想要，可以使用它來操作事件。但在這種情況下，你是對的，它沒有提供附加價值。 – ahren 2012-07-16 01:46:38

替換IMG SRC屬性瓦特/ jQuery不工作

回答

相關問題