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 個の画像に 1 つの 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

これは、「自動ループ」でこれを行う方法です (右矢印がクリックされ、現在の画像が 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 に答える
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

これはデータタグのアイデアです。

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 に答える