javascript - 高度未定义的图像 slider

Question

我正在尝试创建一个图像 slider (上一个/下一个)，以便当我单击“上一个”时图像向左滑动，当我单击“下一个”时向右滑动，速度为 0.5 秒，因此需要一些动画。当我到达最后一张图像并单击“下一步”时，我希望图像“向后运行”到第一个图像，当我在第一个图像中并单击“上一个”时相同，所以它“向前运行”直到最后一个。

我想要相同的行为 this JSFiddle显示。 (但我不需要计时器自动移动图像，也不需要“触发”按钮，只需要“上一个”和“下一个”)。

这里的问题是我的图像没有固定大小。我以百分比定义宽度，但无法定义高度，因为我采用响应式设计，图像会随着浏览器窗口大小的调整而调整。

上一个/下一个 Action 的 jQuery 非常简单，但是当我删除/添加“事件”类到我的图像时，我找不到添加此动画的方法(因此它们变得可见或不可见)。

我已经尝试并排放置所有图像并仅显示第一个图像(设置容器宽度等于图像宽度)，所以当我单击“下一步”时，我只是将容器“移动”到左侧，以便它开始显示下一张图片，但它不起作用，因为一旦我无法定义图片的高度，它们就会出现在彼此下方，而不是并排出现。

JSFiddle

HTML

<div class="images">
    <img class="active" src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
</div>

<div class="previous">previous</div>

<div class="next">next</div>

CSS

img {
    width: 100px;  
    display: none;
    float: left;
}

img.active {
    display: block;
}

jQuery

$('.next').on('click', function() {
    var active = $('img.active');
    var next = active.next('img');

    if (next.length) {
        active.removeClass('active');
        next.addClass('active');
    } else {
        active.removeClass('active');
        $('.images img:first').addClass('active');
    }
});

Answer 1

问题是滑动的高度。

首先，您需要有一个元素，它是包含所有其他图像的“相框”。这很重要。为了更好地想象一张图片:

现在您有几种显示和隐藏图像的技术。一种可能是设置不透明度。使用 transition: opacity .15s ease-in-out; 上一张图片淡出，下一张图片淡入。

对于幻灯片放映效果，是将可见图像的位置向左移动到其宽度，将之前纯新图像的宽度向右移动，然后变为0。这样，将当前图片向左移动框架出来，新的就出来了。

如果高度不一样，这就是困难所在。如果当前图片高300px，新图片高400px，那么这里的图片框会在新图片开始显示时立即调整自己的高度。

下面的内容会随着每张幻灯片开始跳转。

这么想吗？？？

如果是，我可以举个例子说明它是如何工作的。