如何制作滑动效果 - JQuery Slider

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将确保活动幻灯片始终位于顶部。