javascript - 带固定表格的循环图像 slider

Question

所以我正在尝试构建一个简单的作品集网站来展示我完成的一些艺术作品。我不太关心编写 super 高效的代码或类似的东西。所以不要 mock 太多，我真的不太了解网络开发 :D

到目前为止，在我的画廊页面上，我有一个固定位置的单行表格作为图像 slider ，每个图像占据所述表格中的一个单元格。我让 Jquery 处理所有动画，非常接近我想要的方式(animate({left: +=95%}) 中的 95% 值需要调整以保持一切居中，但我可以处理靠我自己)。

但是，我不知道如何让它循环。在过去的三天里，我基本上一直在谷歌上搜索答案，并尝试了一些我自己的解决方案，但没有任何效果。就标记而言，我认为我需要的一切都已准备就绪(例如，“最后”幻灯片之后的第一个图像的克隆，以及“第一个”幻灯片之前的最后一个图像的克隆)。但是 Jquery 让我很困惑。这是代码:

JSbin Demo

CSS:

td{
    padding-right: 250px;
}
.imageContainer img{
    width: 35%;
    height: auto;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .7);
}
#slider{
    position: fixed;
    top: 125px;
    left: -60%;
    right: 27%;
    table-layout: fixed;
    width: 2000%;
    z-index: 1;
}

HTML:

<div>
<table id="slider">
<tr>
<td class="imageContainer"><img src="file://Macintosh HD/Users/administrator/Desktop/drawing_photos/IMG_2062.jpg"></td>
<td class="imageContainer"><img src="file://Macintosh HD/Users/administrator/Desktop/drawing_photos/img_1714.jpg"></td>
<td class="imageContainer"><img src="file://Macintosh HD/Users/administrator/Desktop/drawing_photos/IMG_2060.jpg"></td>
<td class="imageContainer"><img src="file://Macintosh HD/Users/administrator/Desktop/drawing_photos/IMG_2061.jpg"></td>
<td class="imageContainer"><img src="file://Macintosh HD/Users/administrator/Desktop/drawing_photos/IMG_2062.jpg"></td>
<td class="imageContainer"><img src="file://Macintosh HD/Users/administrator/Desktop/drawing_photos/img_1714.jpg"></td>
</tr>
</div>
<a id="nextHitbox"></a>
<a id="prevHitbox"></a>

Jquery:

$(function(){

$('#nextHitbox').on('click', function(){
$('#slider').stop(true, false).animate({left: '+=-95%'}, {duration: 1000, easing: 'swing'});
});

$('#prevHitbox').on('click', function(){
$('#slider').stop(true, false).animate({left: '+=95%'}, {duration: 1000, easing: 'swing'})
});

});

Answer 1

所以很多人进来批评我的格式，我在发布后几分钟内就清理了，但实际上没有人回答我的问题。这是我在这个网站上经常看到的一件非常烦人的事情，但我在周末自己想出了一个 hacky 但没有错误的解决方案。我想我会分享它，以防其他人试图做类似的事情。

本质上，只要有一个固定的命中框(就像代码中已经存在的那样)，每次单击下一个(或上一个)时，它使用 jquery 对 animate() 进行一定量的动画处理，这样当您到达倒数第二个时幻灯片，它与下一个按钮重叠。

然后，将 hitbox 编写为第一个 animate() 到最后一张幻灯片的脚本——这是第一张幻灯片的克隆——然后将 #slider 的 CSS 恢复到 -60% 的起始位置。应使用 native JS 函数 setTimeout() 延迟此 CSS 更改，这会在 CSS 更改回其原始状态之前为最终幻灯片提供足够的时间完成动画。代码如下所示:

CSS:

#nextLoopbox
            {
                display: block;
                position: fixed;
                z-index: 10;
                width: 115px;
                height: 82px;
                /*border: 1px solid #0000ff;*/
                left: 24570px;
                top: 315px;
            }

HTML:

<a id="nextLoopbox"></a>

J查询:

$('#nextHitbox').on('click', function()
            {
                $('#slider').stop(true, true).animate({left: '+=-95.23%'}, {duration: 1000, easing: 'swing'});
                $('#nextLoopbox').stop(true, true).animate({left: '+=-1170px'}, {duration: 1000, easing: 'swing', queue: false})    
            });

$('#nextLoopbox').on('click', function()
            {
                $('#slider').stop().animate({left: '+=-95%'}, {duration: 1000, easing: 'swing'});

                setTimeout(function() 
                    { 
                        $('#slider').css({left: '-59%'});
                        $('#nextLoopbox').css({left: '24570px'});
                    }, 1000);
            });

事实证明，这是一种制作有吸引力的、手动控制的图像 slider 的很棒的、精简脚本的方法，因此希望它能帮助那些在疯狂谷歌搜索时偶然发现它的人。