我正在为我妻子的照明设计业务开发一个投资组合网站。jQuery 循环插件似乎提供了我想要的功能,但即使在查看了 Mike Alsup 网站上的示例之后,我仍然感到困惑。真的,我只是没有使用 JavaScript 的背景来解决这个问题。
我想构建一个幻灯片,使用寻呼机功能控制,使用缩略图进行导航。主幻灯片和缩略图是完全不同的纵横比(以保持布局),所以我不能使用循环为我生成缩略图。幻灯片包括图像和标题。我想尽可能多地保留现有标记。
以下是幻灯片内容:
<div id="slideshow" />
<div class="first">
<img src="../_/img/projects/shootingstar-1.jpg" alt="" />
<p class="credit">caption here</p>
</div>
<div>
<img src="../_/img/projects/shootingstar-2.jpg" alt="" />
<p class="credit">caption here</p>
</div>
<div>
<img src="../_/img/projects/shootingstar-3.jpg" alt="" />
<p class="credit">caption here</p>
</div>
<div>
<img src="../_/img/projects/shootingstar-4.jpg" alt="" />
<p class="credit">caption here</p>
</div>
<div>
<img src="../_/img/projects/shootingstar-5.jpg" alt="" />
<p class="credit">caption here</p>
</div>
这是缩略图/导航内容。我尝试对图像使用一致的命名约定:
<div id="slidenav">
<li><a href="#"><img src="../_/img/projects/shootingstar-1t.jpg" alt="" /></a></li>
<li><a href="#"><img src="../_/img/projects/shootingstar-2t.jpg" alt="" /></a></li>
<li><a href="#"><img src="../_/img/projects/shootingstar-3t.jpg" alt="" /></a></li>
<li><a href="#"><img src="../_/img/projects/shootingstar-4t.jpg" alt="" /></a></li>
<li><a href="#"><img src="../_/img/projects/shootingstar-5t.jpg" alt="" /></a></li>
</div>
最后,我的样式,以防在某种程度上有所帮助:
#slidenav {display: block; float: right; width: 200px;}
#slidenav li {list-style: none; float: left;}
#slidenav li img {padding: 2px; border: 1px solid #999; margin: 0 0 8px 8px;}
#projectcopy {display: block; float: right; width: 220px;}
#projectcopy p {font-size: 12px; color: #666; line-height: 16px; margin: 0 10px 20px 16px; text-align: right;}
#projectcopy ul {list-style: none; margin: 0 10px 20px 16px;}
#projectcopy ul li {font-size: 11px; color: #666; line-height: 14px; text-align: right; margin-bottom: 10px;}
我在这里发布了一个示例:
http://pritchardlighting.com/nova/portfolio/sample-project.html
您可以看到我目前在幻灯片上设置了一个简单的循环。请忽略混乱。显然,这仍在开发中。
我真的很感激任何帮助。这必须是其他人试图做的事情。到目前为止,我很难理解我所看到的示例。他们都假设(正确地)我只是不具备对 JS 的基本理解。