0

我刚刚进入 jquery 并慢慢学习它（我知道，很惭愧），作为一名网页设计师，我发现它的使用非常重要。

现在我正试图弄清楚如何构建一个滑块，如下所示： http: //karmalooptv.com

我查看了源代码，但由于该站点托管在 drupal 上，因此此滑块需要许多不必要的脚本和样式才能正常工作，而我的需要可能不需要这些脚本和样式。

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

提前致谢...

4

3 回答 3

1

您需要几种技术：

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

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

于 2012-04-18T20:11:05.103 回答
1

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

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

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

于 2012-04-18T20:59:16.663 回答
0

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

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

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

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

于 2012-04-18T20:13:43.033 回答