在Jquery Slider中使用多个导航

Question

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

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

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

Answer 1

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

• 方法一：使用JS为左边的元素设置动画（-1 * indexOfSlideAnimatingTo * slideWidth）
  • 这是我认为最好的解决方案，因为它重量轻且非常简单
  • 仅当您使用相对位置以使幻灯片正常工作时才会起作用
• 方法二：使用JS为元素的margin-left设置动画（-1 * indexOfSlideAnimatingTo * slideWidth）
  • 如果您没有使用职位相对
  • 是什么让这比方法一更糟糕的是，当你点击返回到第一张幻灯片时，你还必须设计一个异常条件（或不同的处理程序）
    • 使用其他解决方案，它只会将您移回相对于原始
    的0位置
    • 使用此解决方案，您必须通过调整边距
    将其全部移回到开头

这是第一个的动画功能：

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

第二个非常相似，但我们谈到的额外条件/处理程序与margin-left而不仅仅是left。除非你需要更多的帮助，否则我会把那个留给你编写代码;）

祝你好运！ ：）