Javascript 图像幻灯片计算（位置、索引，其中..）

目标

为低ram设备创建一张响应幻灯片。（以高分辨率生成一组多个图像。移动设备将崩溃）。我只想显示一个图像并预加载N个图像

场景

假设我有77个图像（

nI=77

，变量）。 很明显，我希望加载第一个图像，但也希望每侧预加载2个图像（

nP=2

，变量）。 总共有5个盒子（中间，左2个，右2个）。

nB=nP*2+1

在init上，我想显示如下框/图像（数字是图像索引）

0时，第一个图像是唯一可见的图像

现在是棘手的部分

---

如果我按

将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'));
            }
        }
    }

函数预加载图像（）{
var$image=$（“.my image”）；
var$imageunload=$（“.my image[src=''”）；
对于（var i=current；iI做了相同的工作。我正在预加载4个图像，第一个是显示给用户的图像，右侧有两个图像。左侧有一个图像。如果你想这样做，请告诉我。很好，但我希望能够控制每侧预加载的图像数量。另外，在每侧，我希望预加载相同数量的图像。我谢谢你的帮助，但这并不能解决我的问题。顺便说一句，请不要jquery，我不想更改标记或添加无用的变量。
[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  

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)';
 //}
}

 <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'));
            }
        }
    }