Question

我正在寻找有关制作类似于Vogue使用的幻灯片的教程：http://www.vogue.com/

我需要使用几乎相同的功能，但是中间的活动幻灯片将具有循环分页以与箭头一起转到下一张幻灯片。它还将在主要活动幻灯片中包含HTML内容。旁边的幻灯片将“灰显”出来或显示为与Vogue上的内容类似。

任何人对我可以使用的jquery教程或插件有什么好的建议吗？可以使用jQuery循环来完成吗？

Answer 1

您可以使用Cycle执行此操作，但我认为

上的交互/事件模型

http://flowplayer.org/tools/scrollable/index.html

更强大，可能会更适合这个特定的应用程序。

Answer 2

只是一些提示：改变不透明度：在javascript：

yourelement.style.opactity = x/100; yourelement.style.filter="alpha(opacity=" + x + ")";

在css中

：您可能想要制作包含图像的div，然后应用css

div.IMG_CONTAINER_SHOW{opacity:1;filter:alpha(opacity=100);}
div.IMG_CONTAINER_HIDE{opacity:.5;filter:alpha(opacity=50);}

为了制作一个可滚动的div，你必须使用js或jquery

建议：

创建一个具有特定宽度的外部容器div，这将是页面上显示的窗口在内部创建一个内部容器div，其宽度更大，等于其中所有图像的总内容用divs填充这个内部容器

使用javascripts scrollLeft或jquery循环或其他任何工作并使用上述不透明度方法之一

使用css：

在最外面的容器div中创建div

div.ARROW_LEFT{position:absolute;top:50%;left:100px;width:50px;height:50px;cursor:pointer;}
div.ARROW_RIGHT{position:absolute;top:50%;right:100px;width:50px;height:50px;cursor:pointer;}

和html：

<div class='ARROW_LEFT' onClick='Yourjavascrpt fuunction'><img src='yourLTarrowimg' /></div>
<div class='ARROW_RIGHT' onClick='Yourjavascrpt fuunction'><img src='yourRTarrowimg' /></div>

你可以参考我的教程，它有点复杂但你可以使用它的一部分，如果它有帮助：http://electrifiedpulseone.blogspot.com/

以及它的实际应用： http://electrifiedpulse.com/pictures_.html

如何制作类似于Vogue的100％宽水平幻灯片

2 个答案: