一整个网站，幻灯片效果

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的当前宽度来完成。

我试图概述如何实现您所描述的效果的想法。如果你需要实际的代码问我。我希望我是有帮助的。