0

我正在 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" />
4

4 回答 4

2

您不能为相同的 11 个图像分配一个 id，它永远不会起作用，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-11T14:10:00.850 回答
1

这是一个带有数据标签的想法。

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-11T14:17:59.060 回答
1

逻辑是 - 每次单击该按钮时，索引将返回 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-11T14:04:59.743 回答
1

这是一种使用“自动循环”执行此操作的方法（当单击右箭头且当前图像为 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-11T14:06:32.357 回答