1

我正在使用 Elastislide 轮播插件，并从具有图像路径的表中动态添加图像。现在我正在使用 jQuery 将列表项附加到 Elastislide 的无序列表中。

问题是，在 Elastislide 的 CSS 中，显示设置为无（我在 CSS 文件中检查了它），并且当它们被渲染时，它们会正确显示。

当我动态添加列表项时，它们不会显示。我猜他们的 CSS 仍然没有显示。

这是我用来附加到列表项的代码。

$(document).ready(function () {
     $('#aspnetGridView tr').each(function () {
         if (!this.rowIndex) return; // skip first row
         var path = this.cells[0].innerHTML;
         alert(path);
         $('#rack1 #carousel').append('<li><a href="#"><img src="'+ path +'" alt="image03" /></a></li>');
    });
});

这里是添加静态列表项的地方。

<div id="rack1"><ul id="carousel"  class="elastislide-list">
<li><a href="#"><img src="images/bookCover/java2.jpg" alt="image05" /></a></li></ul></div>

这就是页面渲染后轮播中静态项目的显示方式。我用萤火虫检查了这个。

<li style="width: 33.2418%; max-width: 65px; max-height: 76px;"><a href="#"><img src="images/bookCover/aspnetDesign.jpg"></a>

请帮助我，告诉我我做错了什么。是使用JavaScript的定位吗？

4

1 回答 1

1

如果您使用的轮播与我在其他几个插件中看到的一样，则问题实际上是缓存问题。当页面加载时，插件会创建一个包含所有需要循环访问的项目的内存数组，然后使用这些来确定要显示的内容。因此，当您向标记添加新项目时，它们不会包含在插件所知道的“幻灯片”数组中，因为它们在初始化时不是 DOM 的一部分。

在检查您正在使用的插件的文档后，我将对其进行修改，但希望这可以让您同时解决一些问题。

编辑：

看起来你只是错过了一个（诚然重要的）步骤。您需要.add()在附加项目后调用。所以，添加这个：

$('#rack1 #carousel').add();

你应该准备好（参考：http ://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/ ）。

于 2013-03-09T02:51:29.780 回答