1

私は JS 配列を持っていimgs[]ます。

配列には、次のようなイメージ パスが保持されます。["img/image1.png", "img/image2.png"]

私には2つの機能があります：

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].

これら 2 つの関数を使用して、配列内のすべての画像を動的にループするにはどうすればよいでしょうか?

「次へ」のリンクをクリックすると、次の画像を配列にロードしたいと思います。「前の」リンクをクリックすると、前の画像をロードしたい。私の配列は主に2つ以上の画像で構成されており、さらに上記の例のようにすべての名前が付けられているわけではありません. そのため、画像の名前はさまざまです。

それを行う方法はありますか？

4

5 に答える 5

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 ;ここcで、は現在のキーインデックスでありtot、は配列キーの総数です。

これはあなたに良いスタートを与えるはずです。「画像を読み込んでいます...」という情報で訪問者を楽しませるために、私はそれをあなたに任せます！:)ハッピーコーディング

于 2012-07-21T19:28:02.463 に答える
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 に答える
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

I think you're forgetting to create a var index; outside your functions and using it dynamically. Then, instead of 'hard coding' the values, you can use index++ or index-- to change the offset by one. Later you can even use if's to check for the current index, and improve your code to do what you want when showing, for example, the last img of the array. Hope it helps!

于 2012-07-21T18:29:31.207 に答える