如何制作滑动效果 - JQuery Slider答案

【问题标题】：How to make a sliding effect - JQuery Slider如何制作滑动效果 - JQuery Slider
【发布时间】：2017-04-14 14:04:28
【问题描述】：

我通过添加一个将显示类型从无更改为块的活动类制作了一个简单的滑块。

.slide.active {
    display: block;
}

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

这个给你的.active

left: 0;
z-index: 99;

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

【讨论】：