Javascript/jQuery變化<img src=" "> onclick循環

我在jQuery中創建了一種幻燈片，每次點擊下一個按鈕時，我需要增加圖像src。圖像的文件名是1,2,3,4,5,6,7,8,9,10,11，所以我嘗試使用for循環。但因爲我不是javascript/jquery大師，所以我想不出其他方法來解決我的問題並使其實際工作。Javascript/jQuery變化<img src=" "> onclick循環

用我的代碼，什麼都沒有發生。

這是我已經試過：

$('#right_arrow').click(function() 
{ 
    for (i = 1; i <= 11; i++) 
    { 
     $('#produkti').attr('src', 'style/images/produktet/' + i + '.gif'); 
    } 
});

這是圖像的實際HTML：

<img src="style/images/produktet/1.gif" alt="Produkti 1" id="produkti" />

來源

2012-10-11 Aborted

您不能分配一個ID，以相同的11倍的圖像，它永遠不會工作，jQuery的/ JavaScript的始終會選擇與指定標識的第一個元素。你應該使用類和按索引選擇圖像元素。 –

http://jsfiddle.net/7x8kg/刪除'div'部分。這是看到更改 –

@Bondye您的解決方案工作！有沒有辦法告訴我如何做到與此相反？不是增加而是減少，並添加一個jQuery過渡到此，可能動畫。 – Aborted

的邏輯是 - 每當你點擊該按鈕，該指數將返回1. for (i = 1; i <= 11; i++)

你需要做的是有一個全局變量..說var imgIndex然後，你的代碼應該是 - // somewhere ABOVE.. probably the head tag... var imgIndex = 0;

$('#right_arrow').click(function() 
{ 
    $('#produkti').attr('src', 'style/images/produktet/' + imgIndex + '.gif'); 
    imgIndex++; 
});

記住你必須當它達到最大重置此imgIndex值。

來源

2012-10-11 14:04:59 sircapsalot

相應地編輯了我的帖子..我意識到它後，我看了一下:) – sircapsalot

這是一種帶有「自動循環」做這個（當點擊右箭頭和當前圖像是11號，當前圖像將是1號）

var current = 6; 
$('#right_arrow').click(function() 
{ 
    current = (current + 1 <= 11) ? (current + 1) : (1); 
    $('#produkti').attr('src', 'style/images/produktet/' + current + '.gif'); 
});

來源

2012-10-11 14:06:32 MyBoon

照顧你的代碼嗎？它如何回答OP問題？一些評論總是受歡迎的。這應該是一個評論，而不是一個答案。檢查這個[metaSO問題]（http://meta.stackexchange.com/questions/7656/how-do-i-write-a-good-answer-to-a-question）和[Jon Skeet：Coding Blog]（ HTTP：// msmvps。com/blogs/jon_skeet/archive/2009/02/17/answering-technical-questions-helpfully.aspx）如何給出正確的答案。 – Yaroslav

因爲我不是英國本地人，所以我更喜歡第一次發佈代碼，並在評論之後編輯我的答案（如現在）。這樣我就會關注我的英語。 – MyBoon

您不能分配一個ID到相同的11個圖像，它將永遠不會工作，jquery/JavaScript將始終選擇具有指定ID的第一個元素。

你應該使用類和按索引選擇圖像元素。

$('#right_arrow').click(function() 
{ 
    for (i = 1; i <= 11; i++) 
    { 
     $('.produkti').get(i-1).attr('src', 'style/images/produktet/' + i + '.gif'); 
    } 
});

和HTML瀏覽：

<img src="style/images/produktet/6.gif" alt="Produkti 6" class="produkti" />

來源

2012-10-11 14:10:00

這裏的數據標籤的想法。

HTML：

<img src="style/images/produktet/1.gif" data-slide="1" data-max="9"/>

JS：

$("#right_arrow").click(function(){ 
    var img = $("#produkti"); 
    var slide = img.data().slide; 
    var max = img.data().max; 
    if(slide <= max){ 
     slide ++; 
     img.attr('src', 'style/images/produktet/' + slide + '.gif'); 
     img.data().slide = slide; 
    } 
});

來源

2012-10-11 14:17:59 MalSu

Javascript/jQuery變化<img src=" "> onclick循環

回答

相關問題