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

Javascript / jQuery使用循环更改<img src=" "/> onclick

4 个答案: