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

Posted 2023-03-15

【中文标题】图像幻灯片计算（位置，索引，which..）

【英文标题】：Image Slide Calculation (position,index,which..)

【发布时间】：2014-05-21 13:05:35

【问题描述】：

目标

为低内存设备创建响应式幻灯片。（想象一组高分辨率图像。移动设备会崩溃）。我只想显示一个图像并预加载 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 并且我向后移动，则位置和索引被弄乱了。

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

【问题讨论】：

我也做过同样的工作。我正在预加载 4 张图片，第一张是向用户显示的，两张图片就在它的右边。并留下一张图像。如果你也想这样做，请告诉我。

不错，但我希望能够控制每侧预加载的图像数量。而且在每一侧我想预加载相同数量的图像。

【参考方案1】：

像这样给你的 html 标记

 <img src="" data-src="images/1.jpg" />
 <img src="" data-src="images/2.jpg" />
 <img src="" data-src="images/3.jpg" />
 <img src="" data-src="images/4.jpg" />

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

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

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

【讨论】：

感谢您的帮助，但这并不能解决我的问题。顺便说一句，请不要 jquery，我不想更改标记或添加无用的变量。