Question

我正在寻找一种方法来获得一个JavaScript / jQuery函数，它可以用作函数的整页滑块。我的HTML结构如下：

现在我想做两件事：

我希望slide1和slide2都是全角元素。
此外，我想要一个可以调用的功能，优雅地从slide1滑动到slide2，如果再次调用它，则返回。

我在fullpage.js找到了一个解决方案，但该代码有太多不必要的副作用（例如，没有垂直滚动;内容居中;没有平滑的响应调整字体大小）并且可以做更多事情因此使用的代码比我想要的多。

我认为必须以较少的线条轻松完成，但我不知道如何去做。我希望有人可以提供一些关于如何制作两个全宽div（基本上是两个“body-elements”）的指针，这些div在调用JavaScript / jQuery函数时可以滑动。

Answer 1

我认为这就是你想要的？

JSfiddle

简单的jquery代码：

$( "#s1" ).click(function() {
  $("#s1").css("left","-100%");
  $("#s2").css("left","0");    
});

$( "#s2" ).click(function() {
  $("#s2").css("left","100%");
  $("#s1").css("left","0");    
});

使用cs向左和向右滑动div，并进行1s过渡。

Answer 2

我不会太担心线的数量。 fullPage.js只有6Kb gzipped ......

它提供了与旧浏览器（IE 8 +，Opera 12，没有CSS3浏览器......）的兼容性，适用于检测触摸动作的触摸设备，提供URL锚点，以及您想要的功能以及许多其他有用的功能。

如果需要，您可以禁用垂直居中和文本大小调整。这些是可选的。

不确定垂直滚动的含义，但您可以使用autoScrolling:false来完成类似this的内容，其中包含水平幻灯片和正常的垂直滚动。

两个全宽div之间的滑块

2 个答案: