0

x画像でプログレッシブスライダーを作成しようとしています。つまり、ページの読み込み時に、配列に含まれる画像の数に関係なく、スライダーはスライダーコンテナーに3つの画像を読み込みます。

[次へ/前へ]をクリックすると、最初の3つの画像がいずれかの側にスライドしてから、次の3つの画像（存在する場合）が読み込まれます。

次のインデックス番号を次の関数に送信し、クリック時に増減する必要があります。

これは意味がありますか？:)それは私が作った速いモックアップです...どんなアイデアでも大歓迎です：O）

THX！！！

var aImages = new Array("image1.jpg","image2.jpg","image3.jpg");
var slideImage = 1;

function showImages()
{
    var startImage = (slideImage -1)*6+1;
    var endImage = (startImage +5);

    for(i=startImage ; i <= endImage ; i++)
    {
        $('imageId'+ i).src = aImages[i];
        slideImage ++;
    }

}

function slideImages()
{        
    var startImage = (slideImage -1)*6+1;
    var endImage = (startImage +5);

    for(i=startImage ; i <= endImage ; i++)
    {
        $('imageId'+ i).src = aImages[i];
    }
}   

slideImages();
4

1 に答える 1

1

最適なエクスペリエンスを得るには、少なくとも前の3つの画像と次の3つの画像をプリロードする必要があります

あなたも次のようなことをすることができます

var imageList = [];
for(...)
{

    var img = new Image();
    img.src = '';
    imageList.push(img);

}

それらをキャッシュに保持する

9つの画像プレースホルダー（中央の3と各側に3）を使用して、

imgNode.src = imageList[x].src
于 2013-02-08T14:40:03.963 に答える