jQuery庫通過下一個和上一個按鈕進行切換

Question

我正在嘗試使用jQuery進行某種圖庫翻轉腳本。 因此我得到一個數組-假設13-圖片：

galleryImages = new Array(
'images/tb_01.jpg',
'images/tb_02.jpg',
'images/tb_03.jpg',
'images/tb_04.jpg',
'images/tb_05.jpg',
'images/tb_06.jpg',
'images/tb_07.jpg',
'images/tb_08.jpg',
'images/tb_09.jpg',
'images/tb_10.jpg',
'images/tb_11.jpg',
'images/tb_12.jpg',
'images/tb_13.jpg'
);

我的畫廊看起來像一個網格，一次僅顯示9張圖像。 我當前的腳本已經計算了#gallery中的鋰元素數，加載了前9張圖像並顯示它們。 HTML看起來像這樣：

<ul id="gallery">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<ul id="gallery-controls">
    <li id="gallery-prev"><a href="#">Previous</a></li>
    <li id="gallery-next"><a href="#">Next</a></li>
</ul>

我對jQuery很陌生，但我的問題是我無法弄清楚如何用9個元素將數組拆分為多個部分，以將其作為控件按鈕上的鏈接進行附加。 我需要這樣的東西：

$('#gallery-next').click(function(){
    $('ul#gallery li').children().remove();
    $('ul#gallery li').each(function(index,el){
        var img = new Image();
        $(img).load(function () {
            $(this).css('display','none');
            $(el).append(this);
            $(this).fadeIn();
        }).attr('src', galleryImages[index]); //index for the next 9 images?!?!
    });
});

感謝幫助！

Answer 1

看看我對您問題的解決方案。

一些重要的注意事項：

我將按鈕的工作方式從列表更改為兩個范圍。
我將$(el).append(img)移到了更合適的位置。
curIndex是最后一張圖像的索引。
為了獲得下一個索引圖像，我使用curIndex+index ，然后通過galleryImages.length對其進行了修改，以便它將循環溢出而不是給出錯誤。
你不能真正看到圖像（原因很明顯），所以我加入了該指數在每個文本<li>這樣你就可以用是怎么回事看到。

Answer 2

您可以創建一個變量，例如var firstIndex = 0; 保留當前顯示的第一張圖像的數組索引。 讓您的“下一個”按鈕將其遞增，而您的“上一個”按鈕根據需要將其遞減（按1或9或所需的方式）。 將此值添加到代碼中的index中。

自然，您將需要檢查數組范圍。

Answer 3

嘗試這個：

<html>
<head>
<style>
#gallery-prev, #gallery-next{text-decoration:underline;color:Blue;cursor:pointer;list-style:none;display:inline;padding:5px;}
#gallery li{list-style:none;display:inline;}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript">
  galleryImages = new Array(
    'images/tb_01.jpg','images/tb_02.jpg','images/tb_03.jpg',
    'images/tb_04.jpg','images/tb_05.jpg','images/tb_06.jpg',
    'images/tb_07.jpg','images/tb_08.jpg','images/tb_09.jpg',
    'images/tb_10.jpg','images/tb_11.jpg','images/tb_12.jpg',
    'images/tb_13.jpg');

  function loadImages(p) {
    var startIndex = parseInt($('ul#gallery').attr("startIndex")) + 9 * p;
    if (startIndex < 1 || startIndex >= galleryImages.length) return;

    $('ul#gallery')
    .attr('startIndex', startIndex)
    .find("li").children().remove().end()
    .each(function(i, el) {
      var nextID = startIndex - 1 + i;
      if (nextID >= 0 && nextID < galleryImages.length) {
        $(this).append($("<img src='" + galleryImages[nextID] + "' alt='image " + (nextID + 1) + "' />"));
      }
    });
  }

  $(document).ready(function() {
    $('ul#gallery').attr('startIndex', '1');

    for (var i = 1; i <= 9; i++) 
      $('ul#gallery').append("<li></li>");

    loadImages(0);
    $('li#gallery-prev, li#gallery-next').each(function(i) {
      $(this).click(function() {
          loadImages(i == 1 ? 1 : -1); 
      }) 
    });
  });

</script>
</head>
<body>
<ul id="gallery"></ul>
<ul id="gallery-controls">
    <li id="gallery-prev">Previous</li>
    <li id="gallery-next">Next</li>
</ul>
</body>
</html>

jQuery庫通過下一個和上一個按鈕進行切換

問題描述

3 個解決方案

解決方案1
1 2010-04-26 18:21:22

解決方案2
0 2010-04-26 18:20:29

解決方案3
0 已采納 2010-04-26 19:27:42

jQuery庫通過下一個和上一個按鈕進行切換

問題描述

3 個解決方案

解決方案1 1 2010-04-26 18:21:22

解決方案2 0 2010-04-26 18:20:29

解決方案3 0 已采納 2010-04-26 19:27:42

解決方案1
1 2010-04-26 18:21:22

解決方案2
0 2010-04-26 18:20:29

解決方案3
0 已采納 2010-04-26 19:27:42