在Jquery滑块中使用多个导航

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

---

<>这有点棘手，我的jQuery技巧并没有超级标准。我在想，也许在functions.js文件中有一种方法可以创建它

好吧，这其实并不难。您有几个选项，具体取决于您如何实现滑块（对不起，我没有时间查看您的代码文件）：

• 方法一：使用JS将元素设置为左侧的动画（-1*indexOfSlideAnimatingTo*slideWidth）
  • 在我看来，这是最好的解决方案，因为它轻量级且非常简单
  • 仅当使用“相对位置”使滑块工作时，此选项才起作用
• 方法二：使用JS设置元素左边距的动画（-1*indexOfSlideAnimatingTo*slideWidth）
  • 如果没有使用相对位置
  • 比方法一更糟糕的是，当您单击返回第一张幻灯片时，还必须为其设计一个异常条件（或不同的处理程序）
    • 对于另一个解决方案，它只是将您移回相对于原始的0位置
    • 使用此解决方案，您必须通过调整边距将它们全部向后移动到开头

以下是第一个的动画功能：

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

第二个非常类似，但是使用了我们讨论过的额外条件/处理程序，并使用

marginleft

而不是

left

。除非您需要更多帮助，否则我将把这个留给您编写代码；）

祝你好运！：）