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 回答