jquery - 带有幻灯片效果的整个网站

Question

有谁知道我怎样才能实现像这里http://dawidtomczyk.pl/这样的“滑块站点”功能

点击导航首页等。

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

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

可以做到吗？

Answer 1

做你所描述的想法是：

1. 布局

一种。创建一个 100% 宽度和 overflow-x:hidden 的容器 div。

湾。创建一个子 div，其宽度为 (pages * 100) % （其中 pages 是您要显示的不同页面的数量）和 position:relative （稍后对其进行动画处理）。

C。每个页面都是包含在前一个 div 中的一个 div（b.中描述的那个）。这些 div 必须彼此相邻，因此我们将使用 display: inline-block; 并将它们设置为 (100 / pages) % 的宽度。

结构将是这样的，仅显示 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 设置为“隐藏”，所以第 2 页没有显示。

2. 动画

考虑到滑块 div 的当前宽度，可以通过为 pages div 的“left”属性设置动画来完成动画。

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