刷新幻灯片

Question

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

有没有办法做到这一点？我试过使用delete $ .fn.pluginName但没有运气.

谢谢

Answer 1

我想出了一个(相当时髦)的解决方案.它可能不是最好的方法,因为使用了大量的DOM操作/启动插件,但我希望你能得到这个想法.结果可以在这个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();
});

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