Question

我有兴趣制作像http://littlemonsters.com/中的整页滑块。我查看了他们的代码，并试图找出

- 他们如何完成整页幻灯片（我猜这只是一个非常大的滑块），还有

- 虽然各个“页面”堆叠在一起（如普通页面），但当它们滑动时，它们会左右滑动（我想是整个滑块问题的一部分）

似乎对于许多滑块插件，它们以某种方式使列表项水平化（而当我手动滑动时，我制作了一个非常宽的列表，宽度为9999px，并且有一个溢出隐藏的查看窗口 - 这可能不是最好的办法）。这里有一些我在上面的网站上找到的js，我认为它掌握了关键但我无法理解太多/不完整。

step = (id) ->
  width = $(window).width()
  dir = 1
  dir = -1  if id < curId
  curId = id
  $(".boxDisplay").animate
    left: -1 * dir * width
  , 500, "swing", ->
    $(this).css "left", 0
    $(this).removeClass "boxDisplay"
    next = $(".box:eq(" + (id - 1) + ")")
    next.addClass "boxDisplay"
    boxPosition()
    next.css "left", dir * width
    next.animate
      left: 0
    , 500, "swing"
animate = ->
  i = 0
  $(".box").animate(
    left: -50
  , 10).animate(
    left: 0
  , 50).animate(
    left: 50
  , 10).animate(
    left: 0
  , 50).animate(
    left: -25
  , 10).animate(
    left: 0
  , 50).animate(
    left: 25
  , 10).animate(
    left: 0
  , 50).animate
    left: 0
  , 800
boxPosition = ->
  height = $(".boxDisplay").height()
  $(".box").css "margin-top", ($(window).height() / 2) - (height / 2)

$(document).ready ->
  boxPosition()

谢谢！

jquery整页/窗口滑块

0 个答案: