2

我的页面目前使用幻灯片

我希望能够动态地向我的滑块添加新的“幻灯片”。我这样做的方法是通过一个 XML 文档，其中包含指向“幻灯片图像”和 href 的链接。

我动态添加元素的 jQuery 代码是这样的：

jQuery.ajax({
    type: "GET",
    url: "xml/slider_non_flash_images.xml",
    dataType: "xml",
    success: function(xml) {
        jQuery(xml).find('image').each(function() {
            var imagesrc = jQuery(this).find('src').text();
            var url = jQuery(this).find('href').text();
            var item = '<div><a href="' + url + '"><img src="' + imagesrc + '"/></a></div>';
            jQuery('.slides_container').append(item);
        });
    }
});

这一切都有效，并将 div 添加到包含 div 的幻灯片中。问题是，幻灯片不起作用。

如果我自己对容器中的元素进行硬编码<div>，它们加载得很好。

这可能是一个“时间”问题吗？滑块尝试运行后元素在哪里加载？如果是这样，我该如何在之前添加它们。这一切都发生在(document).ready方法中。有什么更早的吗？

谢谢。

我相信有人会问，所以这里是启动滑块的代码。

jQuery('#slides').slides({
    preload: true,
    preloadImage: 'images/loader.gif',
    play: 8000,
    effect: 'fade',
    pause: 15250000,
    slideSpeed: 8000,
    crossfade: true,
    fadeEasing: "easeOutQuad",
    hoverPause: true
});
4

2 回答 2

3

大多数滑块仅在加载时扫描 DOM 以查找当前存在的元素。如果 DOM 发生了变化（即使用 ajax 动态地），您可能需要重新初始化滑块。对于每个滑块插件，如何做到这一点会有所不同。

您可以尝试将 $('#sliders').slides(...) 调用放入一个函数中，在页面加载时调用该函数，然后在 ajax 更改 DOM 时重新调用该函数。

于 2011-07-29T04:46:31.523 回答
1

查看http://api.jquery.com/live了解更多关于 live 功能的详细信息

于 2011-07-29T04:51:02.337 回答