0

http://frontend.iwssites.com/intellichoice/home.html

我正在尝试向此页面上的主滑块添加功能。现在有左/右箭头和灰色/蓝色框（下图），让用户在 4 张幻灯片之间导航（为 4 张幻灯片使用两个图像——所以它们重复）。我想要做的是将相同的功能添加到 4 框图形（下一步、节能等），以便当用户单击其中一个图形时，他们会被带到该幻灯片。同样，希望下面的蓝色/灰色框与幻灯片相对应。我对每个图形也有“开/蓝色”状态（下一个现在有什么）。

这有点棘手，我的 jquery 技能并没有达到标准。我在想也许functions.js文件中有一种方法可以创建它。

4

1 回答 1

0

好吧，这实际上并不是那么困难。您有几个选项，具体取决于您实现滑块的方式（抱歉，我没有时间查看您的代码文件）：

  • 方法一：你用JS给左边的元素设置动画(-1 * indexOfSlideAnimatingTo * slideWidth)
    • 这是我认为最好的解决方案，因为它轻巧且非常简单
    • 这仅在您使用相对位置使幻灯片工作时才有效
  • 方法二：你用 JS 动画元素的左边距 (-1 * indexOfSlideAnimatingTo * slideWidth)
    • 如果您没有使用相对位置
    • 使这比方法一更糟糕的是，当您单击返回第一张幻灯片时，您还必须设计一个异常条件（或不同的处理程序）
      • 使用另一种解决方案，它只是将您移回相对于原始位置的 0 位置
      • 使用此解决方案，您必须通过调整边距一直回到开头

这是第一个的动画功能：

var move = (-1 * indexOfSlideAnimatingTo * slideWidth);
("#yourSlidesRelativeContainer").animate({ left: move }, speed);

第二个将非常相似，但使用我们讨论过的额外条件/处理程序，margin-left而不是 just left。除非您需要更多帮助，否则我将把它留给您编写代码；）

祝你好运！:)

于 2012-08-01T21:13:58.657 回答