Question

是否有人知道如何实现“滑块网站”功能，例如http://dawidtomczyk.pl/

点击导航主页等。

在审核了与该网站一起使用的每个插件后，其中没有任何插件与“网站幻灯片”效果相关。查看源代码后，我认为他使用包含$（window）.scroll（）的自定义函数完成了它，我真的不明白如何实现这种'效果'。

另外我想补充一点，我更喜欢实现尽可能多的跨浏览器。 IE8 +和新的。

可以吗？

Answer 1

做你所描述的事情的想法是：

<强> 1。 LAYOUT

一个。创建一个100％宽度的容器div和overflow-x：hidden。

湾创建一个宽度为（页面* 100）％的子div（其中pages是要显示的不同页面的数量）和position：relative（稍后为其设置动画）。

℃。每个页面都包含在前一个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%;
   }

“图形”可视化（不是很准确，因为所有的div应该重叠，但我希望它有助于可视化布局）。

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

因为属性overflow-x设置为'hidden'，所以PAGE 2不显示。

<强> 2。动画

动画可以通过动画来自页面div的'left'属性来完成，同时考虑滑块div的当前宽度。

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

整个网站有幻灯片效果

1 个答案: