如何使滑动效果 - jQuery滑块

Question

我做了一个简单的滑块，只需添加一个活动类，它将显示类型从无变为块。

.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到您的​​

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

这对您的.active

left: 0; 
z-index: 99; 

通过定位幻灯片绝对的，您可以将它们推到容器的外部，然后使用活动的类再次在容器的开始处放一张幻灯片。 transition将改变幻灯片之间的动画效果，z-index将确保活动幻灯片始终处于最佳状态。