单击时加载图像阵列并加载下一个图像

时间:2013-02-08 14:32:39

标签: javascript jquery slider

我正在尝试使用x图像构建渐进式滑块。意思是,在页面加载时,无论数组包含多少图像,滑块都会在滑块容器中加载3个图像。

单击next / prev应将前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();

1 个答案:

答案 0 :(得分:1)

要获得最佳体验,您至少应预先加载前3张和后3张图片

您也可以执行类似

的操作
var imageList = [];
for(...)
{

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

}

将它们保存在缓存中

并使用9个图像占位符(中央3加3到每一侧),然后只应用

imgNode.src = imageList[x].src