Javascript / jQuery更改 <img src=“ ”> 帶循環的onclick

Question

我正在用jQuery創建一種幻燈片顯示，每次單擊下一步按鈕時，我都需要增加圖像src。 圖像的文件名是1,2,3,4,5,6,7,8,9,10,11，所以我嘗試使用for循環。 但是由於我不是javascript / jquery專家，所以我想不出其他方法來解決問題並使其真正起作用。

使用我的代碼，什么也沒有發生。

這是我嘗試過的：

$('#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" />

Answer 1

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

您應該使用class並按索引選擇圖像元素。

$('#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" />

Answer 2

邏輯是-每次單擊該按鈕，索引將返回1。for 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值達到最大值時，必須將其重置。

Answer 3

這是一種通過“自動循環”執行此操作的方法（單擊右箭頭並且當前圖像為11號時，當前圖像為1號）

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

Answer 4

這是一個帶有數據標簽的想法。

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;
    }
});