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

【问题标题】：How to make a 100% wide horizontal slideshow similar to Vogue如何制作类似于 Vogue 的 100% 宽水平幻灯片
【发布时间】：2023-03-03 05:38:17
【问题描述】：

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

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

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

【问题讨论】：

看看jQuery循环插件。 jquery.malsup.com/cycle

标签： jquery slideshow cycle

【解决方案1】：

你可以用 Cycle 做到这一点，但我认为交互/事件模型在

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

更健壮，可能更适合这个特定的应用程序。

【讨论】：

【解决方案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，这将是页面上显示的窗口在outer里面做一个内部容器div，宽度比较大，等于里面所有图片的总内容用 div 填充这个内部容器

使用 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

【讨论】：