如何使用 prev/next 功能在数组中循环图像答案

【问题标题】：How to loop images in array with prev/next functionality如何使用 prev/next 功能在数组中循环图像
【发布时间】：2012-07-21 18:21:15
【问题描述】：

我有一个JS数组imgs[]。

数组包含这样的图像路径：["img/image1.png", "img/image2.png"]

我有两个功能：

function prev() {
    $('#project-image').html("<img src='"+imgs[0]+"' alt='Projekt'/>")
}

function next() {
    $('#project-image').html("<img src='"+imgs[1]+"' alt='Projekt'/>")
}

它们在 HTML 中被这样调用：

<nav id="pagination">
  <a id="prev" href="javascript:prev();"></a>
  <a id="next" href="javascript:next();"></a>
</nav>

但是，我遇到的问题是，现在它们被设置为数组中的固定键（由我硬编码），例如 imgs[1]。

如何使用这两个函数动态循环遍历数组中的所有图像？

单击“下一个”链接时，我想加载数组中的下一个图像。单击“上一个”链接时，我想加载上一个图像。我的数组主要由两个以上的图像组成，而且它们的名称并不像上面的例子一样。所以图像的名称各不相同。

有什么想法吗？

【问题讨论】：

标签： javascript jquery arrays loops

【解决方案1】：

jsBin demo

var images = [
  "img/image1.jpg",
  "img/image2.jpg",
  "img/image3.jpg"
];

// ======================================

var tot = images.length;
var c = 0; // current image (array key index)

function loadImage(){
  $("<img/>").attr("src",images[c]).load(function() {
      $('#gallery').html( this );
  }); 
}
loadImage(); // load 1 image

$('#prev, #next').click(function(){
  id= this.id==='next' ? c++ : c-- ;
  c= c==-1 ? tot-1 : c%tot ;
  loadImage(); 
});

虽然代码很容易解释
id= this.id==='next' ? c++ : c-- ; 将确定点击按钮的 ID 并增加或减少获取确切数组键所需的 c 值。

要循环数组键，请使用此三元运算符“技巧”：c= c==-1 ? tot-1 : c%tot ; 其中c 是当前键索引，tot 是数组键的总数。

这应该会给你一个好的开始。为了用“正在加载图像...”信息来娱乐您的访问者，我将把它留给您！ :) 快乐编码

【讨论】：

【解决方案2】：

我刚刚为它写了a handy object。

光标对象

$.cursor = function(options) {
  var cursor = this;
  var array = options.array;
  var idx = options.position || 0;
  cursor.prev = function() {
    if(idx > 0) {
      return array[--idx];
    }
    return null;
  };
  cursor.current = function() {
    if(idx < array.length) {
      return array[idx];
    }
    return null;
  };
  cursor.next = function() {
    if(idx + 1 < array.length) {
      return array[++idx];
    }
    return null;
  };
  return cursor;
};

示例

var cursor = $.cursor({ array: [1,2,3,4,5] });

$("#prev").click(function(){
  if(cursor.prev() !== null) {
    $("#cur").html(cursor.current());
  }
});

$("#next").click(function(){
  if(cursor.next() !== null) {
    $("#cur").html(cursor.current());
  }
});

$("#cur").html(cursor.current());

【讨论】：

【解决方案3】：

首先找到图像链接所在数组的哪个偏移量，然后对于 next() 转到下一个偏移量，如果到达最后一个偏移量，则显示 0（零）偏移量，依此类推。对于 prev() 转到当前图像偏移量，offset - 1 将为您提供前一个图像，如果您达到偏移量 0（零），则转到最后一个偏移量。

【讨论】：

【解决方案4】：

简单，只需将当前图像密钥存储在 var 中即可。

current_image = 0;

function prev() {
    current_image--;
    $('#project-image').html("<img src='"+imgs[current_image]+"' alt='Projekt'/>")
}

function next() {
    current_image++;
    $('#project-image').html("<img src='"+imgs[current_image]+"' alt='Projekt'/>")
}

【讨论】：

问题在于它的计数也低于 0 和高于最高数组值。没有imgs[-1]

【解决方案5】：

我认为您忘记创建 var 索引；在您的功能之外并动态使用它。然后，您可以使用 index++ 或 index-- 将偏移量更改为 1，而不是对值进行“硬编码”。稍后您甚至可以使用 if's 检查当前索引，并改进代码以在显示时执行您想要的操作，例如，数组的最后一个 img。希望对您有所帮助！

【讨论】：