Question

我正在研究一个使用动态元素排序的投资组合脚本。我有一个页面上的项目列表，可以使用jquery进行排序。当用户单击其中一个元素时，会在页面上的特定div中加载大图像。首先加载默认图像。我想做的是使用Nathan Searles的slides.js制作2到3张图片的幻灯片。我遇到的问题是在将一组新图像加载到div后重新调用脚本。这是加载div中项目的基本代码。

<div class="slides_container" id="slidesTarget">
<img src="../javascript/img/slide-1.jpg" width="570" height="270" alt="Slide 1">
<img src="../javascript/img/slide-2.jpg" width="570" height="270" alt="Slide 2">
</div>

<ul class="webbies">
<li data-id="ab"><a href="#"><img src="/Portfolio/temp/webby-andy-clarke.png" width="110" height="110" alt="" /></a>
div class="clickContent">List of images go here</div>
</li>

<li data-id="ac"><a href="#"><img src="/Portfolio/temp/webby-andy-clarke.png" width="110" height="110" alt="" /></a>
div class="clickContent">List of images go here</div>           
</li>
</ul>

$("ul.webbies li a").click(function(e) {
e.preventDefault();
var content = $(this).next('.clickContent').html();
if(content) $("#slidesTarget").html(content);
});
$("#slides").slides();

所以，基于这个代码示例（我可能已经错过了一些部分，但希望你会得到这个想法），初始div加载slides.js脚本以创建一个漂亮的幻灯片。当用户点击ul.webbies中的一个项目时，会将一组新图像加载到#slidesTarget中。我需要做的是重新设置slides.js脚本，以根据新的图像列表创建幻灯片。希望这是有道理的。提前感谢您的任何帮助/建议。

Answer 1

嗯，这取决于您使用的插件以及它们允许的挂钩类型。 jquery Cycle，我经常使用它，允许你在幻灯片初始化后动态添加它们。你能给出你正在使用的插件的链接吗？

jquery周期：http://jquery.malsup.com/cycle/

修改好的注意到插件。

将幻灯片添加到slides_container后，难道不能重新初始化容器上的插件吗？只需调用$（“＃slidesTarget”）。slides（）;

dom操作后重新调用jquery插件

1 个答案: