1

我有一个 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].

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

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

任何想法如何做到这一点？

4

5 回答 5

1

我只是为它写了一个方便的对象。

光标对象

$.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());

​</p>

于 2012-07-21T18:45:16.680 回答
1

jsBin 演示

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 ;wherec是当前键索引，tot是数组键的总数。

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

于 2012-07-21T19:28:02.463 回答
0

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

于 2012-07-21T18:25:34.627 回答
0

很简单，只需将当前图像密钥存储在 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'/>")
}
于 2012-07-21T18:28:38.520 回答
0

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

于 2012-07-21T18:29:31.207 回答