一整個網站，幻燈片效果

Question

是否有人知道我可以做到，在「滑點」功能，例如這裏http://dawidtomczyk.pl/

點擊導航首頁等

審查每個插件，這是後與該網站一起使用，其中沒有一個與「網站幻燈片」效果有關。在查看源代碼後，我認爲他用一個包含$（window）.scroll（）的自定義函數完成了它，我真的不知道如何完成這個「效果」。

另外我想補充一點，我更願意實現它儘可能多的跨瀏覽器，因爲它可以得到。 IE8 +和新的。

可以這樣做嗎？

Answer 1

的想法做你所描述的會是什麼：

1 LAYOUT

一個。創建一個100％寬度和overflow-x：hidden的容器div。

b。創建一個帶有寬度（頁面* 100）％（其中頁面是要顯示的不同頁面的數量）和位置：相對（以稍後動畫）的子div。

c。每個頁面都是前一個div（在b中描述的）中包含的div。這些div必須彼此相鄰，所以我們可以使用display：inline-block;並將它們設置爲（100 /頁）％的寬度。

結構會是這樣的只顯示2頁：

<div id="slider"> 
     <div id="pages"> 
      <div> 
       <!-- Content of page 1 --> 
      </div><!-- 
      --><div> 
       <!-- Content of page 2 --> 
      </div> 
     </div> 
    </div> 

而CSS：

#slider { 
     overflow-x: hidden; 
     width: 100%; 
    } 

    #pages { 
     position: relative; 
     width: 200%; 
    } 

    #pages > div { 
     display: inline-block; 
     width: 50%; 
    } 

A「圖形」可視化（不是很準確，因爲所有的div應重疊，但我希望它有助於可視化佈局）。

+-SLIDER----------------------------+ 
|+---PAGES--------------------------------------------------------------+ 
||+---------------------------------++---------------------------------+|         
|||         ||         || 
|||   PAGE 1    ||    PAGE 2    || 
|||         ||         || 
|||         ||         || 
|||         ||         || 
|||         ||         || 
||+---------------------------------++---------------------------------+| 
|+----------------------------------------------------------------------+ 
+------------------------------------+ 

因爲屬性overflow-x設置爲'hidden'，所以不顯示PAGE 2。

2.動畫

動畫可以通過從這些網頁中的div動畫「左」屬性，考慮到滑塊div的當前寬度來完成。

我試圖概述如何實現您所描述的效果的想法。如果你需要實際的代碼問我。我希望我是有幫助的。