2

我正在为我妻子的照明设计业务开发一个投资组合网站。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 的基本理解。

4

2 回答 2

3

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

于 2011-05-01T16:32:35.180 回答
1
  1. 删除您围绕内容循环的所有 div（div#slideshow 的子元素。当脚本循环一个 div 中的所有内容时，它们会阻止循环工作）。
  2. 出于同样的原因删除 p.credit。否则脚本会循环它，如果你没有匹配的缩略图，你会遇到麻烦（见 3.）
  3. 确保缩略图 {*t.jpg} 的数量与 {div#slideshow} 中的 img 数量完全匹配。这就是使它起作用的关键。不匹配导致不工作的脚本。
  4. 完全使用演示中的 jquery 标记并将 {pager: '#nav',} 替换为 {pager: '#slidenav',}

如果脚本加载仍然无法正常工作，请检查 firebug。如果是，请先尝试使循环 {div#slideshow} 运行，然后再转到链接的缩略图。

于 2011-05-02T07:25:18.167 回答