2012-04-18 94 views
0

我只是现在进入jquery并慢慢学习它(我知道是耻辱),并且作为一个webdesigner我觉得它的使用非常重要。你如何构建这个?

现在我想figuire了一个如何去建立一个滑块上所示:http://karmalooptv.com

我看过的源代码,但由于在网站上Drupal的主持过程中,有很多不必要的脚本和样式,这些滑动条可能不需要满足我的需求。

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

在先进的感谢...

+0

这是一个教程,将有助于 - http:// jqueryfordesigners。com/jquery-infinite-carousel/ – 2012-04-18 20:05:08

+0

我还没有尝试过任何东西,因为坦率地说我很笨,我并没有要求代码真的只是像Jay所做的那样。现在我明白如何构建一个无限旋转木马,我想知道他们如何能够在任何屏幕尺寸下拉伸滑块? – user1232698 2012-04-18 20:09:18

+0

为此,您将为您的CSS设置这些div以使用百分比而不是像素。你必须尝试。 – 2012-04-18 20:18:27

回答

1

我创建了这个的jsfiddle帮助您:http://jsfiddle.net/QEVqN/7/

有一个滑块的原始功能。让我解释我在做什么: 1)可见幻灯片和唯一需要动画的幻灯片, 2)当我们向左或向右导航时,将输入幻灯片对准正确的位置(向右或向左)并用可见的动画向右或向左移动

如果有很多(也许是100),则不必为所有幻灯片设置动画,并且可以获得循环效果。 通常情况下,您将为包含所有幻灯片的div设置overflow:hidden,但我没有,所以您可以看到背后发生了什么。这里是溢出:隐藏http://jsfiddle.net/QEVqN/6/

+0

非常感谢你,这是我能找到的最好的例子。我猜测它的宽度无限是不可能的? – user1232698 2012-04-18 21:05:54

+0

我不确定你想要什么。你不能设置无限宽度,我无法想象你需要什么。 – gabitzish 2012-04-18 21:08:38

+0

您可以使用百分比设置元素的宽度,它将适应任何显示器 – gabitzish 2012-04-18 21:09:43

1

有你需要的几种技术:

  1. 首先,具有溢出隐藏要这样隐藏在它之外的一切相框一个div。
  2. 其次,更长的div包含所有的图像并排。这个div将会在你的overflow-hidden div里面并且是相同的高度。
  3. 您的内容div只会将其x位置向后移动,直到它到达上一张幻灯片。
  4. 然后,当您到达最后一张幻灯片时,您先交换第一张和最后一张,然后立即移动内容div,以便再次显示最后一张幻灯片。这就是你如何获得持续的效果。

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

+0

谢谢你乔纳森打破它。我会开始试验这种技术,看看我得到了什么。 – user1232698 2012-04-18 20:33:02

0

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

这也是一个很好的一个: http://slidesjs.com/

大多数的jQuery插件允许您自定义下的循环性能,但他们都会有不同的语法。

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

+0

哦,所以他们基本上有无限数量的幻灯片,如果你有屏幕尺寸越来越大? – user1232698 2012-04-18 20:37:08

+0

或者我应该说与屏幕尺寸一起增长? – user1232698 2012-04-18 21:08:03

+0

如果您希望图像和滑块与屏幕一起增长,则可以按照gabitzish的建议将图像宽度设置为100%(您可能还必须在图像的父元素上设置此宽度,具体取决于标记和CSS的外观like) – chicagoing 2012-04-19 00:57:55