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

Question

我正在尝试构建一个带有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();

Answer 1

要获得最佳体验，您至少应该预加载前3个和后3个图像

你也可以做一些类似的事情

var imageList = [];
for(...)
{
    var img = new Image();
    img.src = '';
    imageList.push(img);
}

将它们保存在缓存中

使用9个图像占位符（中央3个，每侧3个），然后只应用

imgNode.src = imageList[x].src