固定 table 的循环图像滑块

Question

所以我正在尝试建立一个简单的作品集网站来展示我完成的一些艺术作品。我不太关心编写超级高效的代码或类似的东西。所以不要嘲笑太多，我真的对网络开发知之甚少:D

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

但是，我想不通的是如何让它循环。在过去的三天里，我基本上一直在谷歌上搜索答案，并尝试了一些我自己的解决方案，但没有任何效果。就标记而言，我认为我需要的一切都已准备就绪（例如，"last" 幻灯片之后的第一张图像的克隆，以及 "first" 之前的最后一张图像的克隆滑动）。但是 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 每次单击下一个（或上一个）时按一定量动画（），以便通过当您到达倒数第二张幻灯片时，它与下一个按钮重叠。

然后，将 hitbox 编写为第一个 animate() 到最后一张幻灯片的脚本——这是第一张幻灯片的克隆——然后将 #slider 的 CSS 恢复到 -60 的起始位置%。应使用本机 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>

Jquery:

$('#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);
            });

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

固定 table 的循环图像滑块

Looping image slider with fixed table

html

javascript

css

jquery

slider