jQuery Cycle 寻呼机功能使用现有的缩略图进行导航

Question

我正在为我妻子的照明设计业务开发一个作品集网站。 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 有基本的了解，而我只是不具备。

Answer 1

请参阅此演示来回答您的问题：

Answer 2

1. 删除围绕要循环的内容的所有 div（div#slideshow 的子元素。它们会阻止循环工作，因为脚本会循环 ONE div 中的所有内容）。
2. 出于同样的原因删除 p.credit 。否则脚本会循环执行，如果没有匹配的缩略图（请参阅 3），您就会遇到麻烦。
3. 请确保缩略图 {*t.jpg} 的数量与 {div#slideshow} 中的 img 数量精确匹配。这就是让它发挥作用的一点。不匹配会导致脚本无法工作。
4. 完全使用演示中的 jquery 标记，

如果仍然无法正常工作，请将 {pager: '#nav',} 替换为 {pager: '#slidenav',}，如果脚本加载，请使用 firebug 检查。如果是，请先尝试使循环 {div#slideshow} 运行，然后再前进到链接的缩略图。