如何使滑動效果 - 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將確保活動幻燈片始終處於最佳狀態。