javascript - 刷新slidejs

Question

我正在使用来自 http://www.slidesjs.com/ 的 slidejs我想刷新图像列表，因为我需要动态添加和删除图像。

有什么办法吗？我尝试使用 delete $.fn.pluginName 但没有成功。

谢谢

Answer 1

我想出了一个(相当古怪的)解决方案。这可能不是最好的方法，因为使用了大量的 DOM 操作/启动插件，但我希望你明白了。结果可以是 found on this JSFiddle .

HTML

<input type="button" id="add" value="Add slide!" />

<div id="slides">
    <img src="http://placehold.it/100x100" />
    <img src="http://placehold.it/120x120" />
    <img src="http://placehold.it/140x140" />
    <img src="http://placehold.it/160x160" />
    <img src="http://placehold.it/180x180" />
</div>

JavaScript

// Create a clone of the images array
var $originalClone = $("#slides").children().clone();

// Remove the parent (we'll create it dynamically)
$("#slides").remove();

// Create the new slides, add the children & add it to the DOM
var $newSlides = $("<div />")
    .append($originalClone)
    .appendTo($("body"));

// Execute the slide plugin
$newSlides.slidesjs({
    width: 940,
    height: 528
});

$("#add").on("click", function() {
    // Remove the old slider
    $newSlides.remove();

    // Create a new slider, add the children & add it to the DOM
    var $newSlides2 = $("<div />")
        .append($originalClone)
        .appendTo($("body"));

    // Add the new image to the newly created slider
    $("<img />")
        .attr("src", "http://placehold.it/200x200")
        .appendTo($newSlides2);

    // Execute the slide plugin
    $newSlides2.slidesjs({
        width: 940,
        height: 528
    });

    // In this demo, the button "add slide" can be clicked once
    $("#add").remove();
});

我希望这个解决方案能给你一个好的方向提示!