如何制作滑动效果- JQuery滑块

Question

我做了一个简单的滑块，只需添加一个活动类，将显示类型从none更改为block。

.slide.active {
    display: block;
}

.slide {
    display: none;
    width: 100%;
    height: 100%
}

在这里查看我的解决方案：https://jsfiddle.net/6dncwtcu/

有没有一种方法可以让图片像这样滑入滑出：http://www.jssor.com/或者我的解决方案不适合这种效果。

请记住，我不想使用任何插件。

Answer 1

您需要为每张幻灯片添加定位，然后在幻灯片处于活动状态时将动画显示到所需的位置。我已经用一个例子更新了你的小提琴：https://jsfiddle.net/6dncwtcu/3/

我已经将以下CSS添加到您的.slide中

left: 100%;
position: absolute;
transition: all 200ms;

把这个传到你的.active上

left: 0;
z-index: 99;

通过绝对定位幻灯片，您可以将它们推到容器之外，然后使用活动类使幻灯片再次位于容器的起始处。transition将改变在幻灯片之间进行动画的速度，并且z-index将确保活动幻灯片始终在顶部。