Question

所以我试图建立一个简单的投资组合网站，展示我已经完成的一些艺术。我不太关心编写超高效代码或类似的东西。所以不要嘲笑太多，我真的不太了解网络开发：D

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

然而，我无法弄清楚如何让它循环。过去三天我基本上都在谷歌上搜索答案以及尝试一些自己的解决方案，但没有任何工作。就标记而言，我认为我需要的所有东西都是合适的（例如，＆＃34;最后＆＃34;幻灯片之后的第一张图片的克隆，以及＆＃之前的最后一张图片的克隆34;第一次＆＃34;幻灯片）。但是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但没有bug的解决方案。想我会分享它，以防其他人试图做类似的事情。的

基本上，只需要一个固定的hitbox（就像代码中已经存在的那个），每当你点击下一个（或前一个）时，使用jquery动画（）一定量，这样当你到达倒数第二个时滑动，它与下一个按钮重叠。

然后，将hitbox的脚本首先动画（）到最终幻灯片 - 这是第一张幻灯片的克隆 - 然后将#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); });

这实际上是一个很棒的，脚本精简的方式来制作一个有吸引力的，手动控制的图像滑块，所以希望它可以帮助那些在谷歌搜索时偶然发现它的人。

循环图像滑块与固定表

1 个答案: