javascript - jQuery 画廊翻转与下一个和上一个按钮

Question

我正在尝试使用 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?!?!
    });
});

感谢您的帮助!

Answer 1

查看我的 solution to your problem .

一些重要的注意事项:

1. 我已将按钮的工作方式从列表更改为两个范围。
2. 我移动了行$(el).append(img)到一个更合适的地方。
3. curIndex是最后一张图片的索引。
4. 为了获得下一个索引图像，我使用了 curIndex+index ，然后通过 galleryImages.length 对其进行修改，使其循环溢出而不是给出错误。
5. 您无法实际看到图像(原因很明显)，所以我在每个 <li> 中添加了索引作为文本所以你可以看到正在发生的事情。