jQuery 画廊用下一个和上一个按钮翻转答案

【问题标题】：jQuery gallery turn over with next and previous buttonsjQuery 画廊用下一个和上一个按钮翻转
【发布时间】：2010-04-26 17:49:48
【问题描述】：

我正在尝试使用 jQuery 做某种 Gallery-Turn Over Script。因此，我得到了一个包含 - 比如说 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 中 li 元素的数量，加载了前 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?!?!
    });
});

感谢您的帮助！

【问题讨论】：

标签： javascript jquery arrays xhtml

【解决方案1】：

查看我的solution to your problem。

一些重要说明：

我已将按钮的工作方式从一个列表更改为两个跨度。
我将$(el).append(img) 行移到了更合适的位置。
curIndex 是最后一张图片的索引。
为了获取下一张索引图片，我使用了curIndex+index，然后通过galleryImages.length 对其进行了修改，以便循环溢出而不是报错。
您无法实际看到图像（原因很明显），因此我已将索引作为文本添加到每个 <li> 中，以便您可以看到正在进行的操作。

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案3】：

您可以创建一个变量，例如var firstIndex = 0; 来保存当前显示的第一张图像的数组索引。让您的“下一个”按钮增加它，并让您的“上一个”按钮根据需要减少它（1 或 9 或您想要的方式）。将此值添加到代码中的index。

当然，您需要检查数组边界。

【讨论】：