图像幻灯片计算（位置，索引，which..）

Question

目标

为低内存设备创建响应式幻灯片。（想象一组高分辨率图像。移动设备会崩溃）。我只想显示一个图像并预加载 N 个图像。

场景

假设我有 77 张图片（nI=77，变量）。 Obiovsly 我想加载第一张图片，但也想每边预加载 2 张图片（nP=2，变量）。 总共有 5 个框（center, 2left, 2right）。nB=nP*2+1.

在初始化时，我想按如下方式显示框/图像（数字是图像索引）

[75][76][0][1][2]

0，第一张图片是atm唯一可见的图片。

现在是棘手的部分。

如果我按<（下一个），静态可视化是：

[76][0][1][2][3]

但每个盒子都会移动！因此，如果我们从默认位置集开始：

[75][76][0][1][2]//image index
[ 0][ 1][2][3][4]//box index
[-2][-1][0][1][2]//box position

<

[76][0][1][2][ 3]//image index
[ 1][2][3][4][ 0]//box index
[-2][-1][0][1][2]//box position

按左键将以下图像加载到第一个框中，将第一个框移动到最后一个位置，每隔一个框向左移动（一个偏移宽度）。

>

[74][75][76][0][1]//image index
[4][ 0][ 1][2][3]//box index
[-2][-1][0][1][2]//box position  

按右将前一个图像加载到最后一个框，将最后一个框移动到第一个位置，每隔一个框向右移动（一个偏移宽度）。

一些相关的js

var I=ARRAYOFIMAGES,
    nI=images.length,
    nP=2,
    nB=nP*2+1,
    nC=0,
    slideWidth=slide.offsetWidth; // CURRENT IMAGE INDEX 200px variable

function defaultPos(a,b){//[-400, -200, 0, 200, 400] 
 for(a=[],b=0;b<nB;b++){
  a[b]=(b-nP)*slideWidth
 }
 return a
}
function currentInd(a,b){//[75, 76, 0, 1, 2] 
 for(b=[],a=0;a<nB;a++){
  b[a]=(a+nC-nP+nI)%nI
 }
 return b
}
function next(e){
 nC=++nC%nI;
 d=1; // direction 
 calculate()
}
function prev(e){
 nC=(--nC+nI)%nI;
 d=0;
 calculate()
}
function calculate(){
 //for(BOXES){
 // if(ISIMAGE2CHANGE){box[l].style.backgroundImage='url('+I[IMAGEINDEX]+')')}
 // box[l].style.webkitTransform='translate3d('+POSITION+'px'+',0,0)';
 //}
}

部分工作演示

第一个演示

http://jsfiddle.net/VfYR4/

新演示（较短但无法加载正确的图像）

http://jsfiddle.net/7Nedw/1/

注意：将延迟调整为-webkit-transition:-webkit-transform 1000ms ease 1000ms;，看看发生了什么。

问题

数学是错误的。如果索引为 0 并且我向后移动，则位置和索引被弄乱了。

该函数返回错误的加载索引、位置以及加载哪个框。

Answer 1

像这样给你的 HTML 标记

 <img src="" data-src="images/1.jpg" alt="img0"/>
 <img src="" data-src="images/2.jpg" alt="img1"/>
 <img src="" data-src="images/3.jpg" alt="img2"/>
 <img src="" data-src="images/4.jpg" alt="img3"/>

并使用此方法，当您按下左键或右键时：

function preLoadImages() {
        var $image = $(".my-image");
        var $imageUnloaded = $(".my-image[src='']");

        for(var i=current;i<current+4;i++) {    //(current+1) is image index shown to user
            var j = (i+$image.length)%$image.length;
            console.log("Image to be loaded : "+j);
            var $this  = $($image[j]);
            if($this.attr('src') == '') {
                $this.attr('src',$this.data('src'));
            }
        }
    }

如果您想更改每侧预加载图像的数量，您可以稍微更改逻辑。