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