你是如何构建这个的？

Question

我刚刚进入jquery并慢慢学习它（羞耻，我知道），作为一名webdesigner，我发现它非常重要。

现在我试图想象一下如何构建一个如下所示的滑块：http://karmalooptv.com

我查看了源代码，但由于该站点是在drupal上托管的，因此该滑块需要许多不必要的脚本和样式才能满足我的需求。

我不明白它如何在屏幕上伸展并在图像中循环，当它向左或向右到达最后一张幻灯片时，它将用第一张/最后一张图像填充它并继续前进。

先谢谢...

Answer 1

您需要几种技术：

1. 首先，一个溢出隐藏的div就像一个隐藏它之外的所有东西的画框。
2. 其次，更长的div，包含所有图像并排。这个div将在你的溢出隐藏的div中，并且高度相同。
3. 您的内容div只会向后移动其x位置，直至到达最后一张幻灯片。
4. 然后，当您到达最后一张幻灯片时，您将交换第一张和最后一张，并立即移动内容div，以便再次显示最后一张幻灯片。这就是你获得持续效果的方式。

＃3中的所有动画都是渐进式的，因此您可以获得滚动效果。 ＃4的变化是即时的，因此用户不会知道。

Answer 2

我已经创建了这个jsFiddle来帮助你：http://jsfiddle.net/QEVqN/7/

滑块有原始功能。让我解释一下我在做什么： 1）可见幻灯片和进入的幻灯片是唯一需要动画的幻灯片， 2）当我们向左或向右导航时，将输入的幻灯片与正确的位置（右或左）对齐，并使用右侧或左侧的可见位置对其进行动画处理

如果有很多幻灯片（可能是100张），您不必为所有幻灯片设置动画，并且您将获得循环效果。 通常，您将为包含所有幻灯片的div设置overflow：hidden，但我没有这样，您可以看到它背后发生了什么。这是溢出：隐藏http://jsfiddle.net/QEVqN/6/

Answer 3

查看此处提到的一些幻灯片： http://slodive.com/freebies/best-jquery-slideshow-gallery-plugins/

这也是一个不错的选择： http://slidesjs.com/

大多数jQuery插件允许您自定义循环行为，但它们都有不同的语法。

在您发布的示例中，他们可以通过设置元素的宽度（990px​​）和高度（554px）CSS属性来在屏幕上拉伸图像。