jQuery gallery使用下一个和上一个按钮进行翻转

我正在尝试用jQuery做一些Gallery-Turn Over Script。 因此我得到了一个arrays – 比方说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看起来像这样：

 
 
 
 
 
 
 
 
 
 
 
 
 
Previous
 
Next
  

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

试试这个：

        
 
 
Previous
 
Next
 
   

Answer 2

看看我的问题解决方案 。

一些重要的注意事项：

1. 我已经将按钮的工作方式从列表更改为两个跨度。
2. 我将$(el).append(img)移到了一个更合适的位置。
3. curIndex是最后一张图像的索引。
4. 为了获得下一个索引图像，我使用了curIndex+index ，然后通过galleryImages.length对其进行修改，以便循环溢出而不是出错。
5. 您实际上无法看到图像（出于显而易见的原因），因此我在每个

添加了索引作为文本，以便您可以看到正在进行中。

Answer 3

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

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