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

请参阅to this demo以回答您的问题：

Answer 2

删除你内容周围的所有div来循环（div＃幻灯片的子元素。它们阻止循环工作，因为脚本会循环播放一个div中的所有内容。）
出于同样的原因删除p.credit。如果没有匹配的缩略图（参见3。）
确保缩略图的数量{* t.jpg}恰好匹配{div＃slideshow}中的img数量。这就是让它发挥作用的重点。不匹配导致非工作脚本。
完全使用演示中的jquery标记，并将{pager：'＃nav'，}替换为{pager：'＃slidenav'，}

如果仍然不工作，请检查脚本加载时是否使用firebug。如果是，请先尝试使循环{div＃slideshow}运行，然后再向前移动到链接的缩略图。

jQuery循环分页器功能使用现有缩略图进行导航

2 个答案: