Question

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

有没有办法做到这一点？我曾尝试使用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();
});

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

Answer 2

我最近遇到了同样的问题，并设法通过更改插件来解决它。

这是我的解决方案：

在Plugin.prototype.init = function() {之前添加以下这些行：

Plugin.prototype.refresh = function (number){
    var $element=$(this.element);
    var _this = this;
    this.data = $.data(this);
    $(this.element).find(".slidesjs-pagination-item").remove();
    $.data(this, "total", $(".slidesjs-control", $element).children().not(".slidesjs-navigation", $element).length);
    $.each($(".slidesjs-control", $element).children(), function(i) {
        var $slide;
        $slide = $(this);
        return $slide.attr("slidesjs-index", i);
      });
    $.each($(".slidesjs-control", $element).children(), function(i) {
        var $slide;
        $slide = $(this);
        return $slide.attr("slidesjs-index", i);
      });
      if (this.data.touch) {
        $(".slidesjs-control", $element).on("touchstart", function(e) {
          return _this._touchstart(e);
        });
        $(".slidesjs-control", $element).on("touchmove", function(e) {
          return _this._touchmove(e);
        });
        $(".slidesjs-control", $element).on("touchend", function(e) {
          return _this._touchend(e);
        });
      }
      $element.fadeIn(0);
      this.update();
      if (this.data.touch) {
        this._setuptouch();
      }
      $(".slidesjs-control", $element).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0, function() {
        return $(this).css({
          zIndex: 10
        });
      });
      if (this.options.navigation.active) {
        prevButton = $("<a>", {
          "class": "slidesjs-previous slidesjs-navigation",
          href: "#",
          title: "Previous",
          text: "Previous"
        }).appendTo($element);
        nextButton = $("<a>", {
          "class": "slidesjs-next slidesjs-navigation",
          href: "#",
          title: "Next",
          text: "Next"
        }).appendTo($element);
      }
      $(".slidesjs-next", $element).click(function(e) {
        e.preventDefault();
        _this.stop(true);
        return _this.next(_this.options.navigation.effect);
      });
      $(".slidesjs-previous", $element).click(function(e) {
        e.preventDefault();
        _this.stop(true);
        return _this.previous(_this.options.navigation.effect);
      });
      if (this.options.play.active) {
        playButton = $("<a>", {
          "class": "slidesjs-play slidesjs-navigation",
          href: "#",
          title: "Play",
          text: "Play"
        }).appendTo($element);
        stopButton = $("<a>", {
          "class": "slidesjs-stop slidesjs-navigation",
          href: "#",
          title: "Stop",
          text: "Stop"
        }).appendTo($element);
        playButton.click(function(e) {
          e.preventDefault();
          return _this.play(true);
        });
        stopButton.click(function(e) {
          e.preventDefault();
          return _this.stop(true);
        });
        if (this.options.play.swap) {
          stopButton.css({
            display: "none"
          });
        }
      }
      if (this.options.pagination.active) {
        pagination = $("<ul>", {
          "class": "slidesjs-pagination"
        }).appendTo($element);
        $.each(new Array(this.data.total), function(i) {
          var paginationItem, paginationLink;
          paginationItem = $("<li>", {
            "class": "slidesjs-pagination-item"
          }).appendTo(pagination);
          paginationLink = $("<a>", {
            href: "#",
            "data-slidesjs-item": i,
            html: i + 1
          }).appendTo(paginationItem);
          return paginationLink.click(function(e) {
            e.preventDefault();
            _this.stop(true);
            return _this.goto(($(e.currentTarget).attr("data-slidesjs-item") * 1) + 1);
          });
        });
      }
      $(window).bind("resize", function() {
        return _this.update();
      });
      this._setActive();
    if (number){            
        this.goto(number+1);
    } else {
        this.goto(0);
    }

};

然后，将return $.fn[pluginName] = function(options,the_args) {的内容更改为：

return $.fn[pluginName] = function(options,the_args) {
    var the_return=this.each(function() {
        if (!$.data(this, "plugin_" + pluginName)) {
          return $.data(this, "plugin_" + pluginName, new Plugin(this, options));
        }
    });
    if (typeof options=="string"){
        var element=this.get(0);
        if (arguments.length>1){
            var the_args=Array.prototype.slice.call(arguments);;
            the_args.splice(0,1);
            var plugin=$.data(element, "plugin_" + pluginName);
            return plugin[options].apply(plugin,the_args);
        } else {
            return $.data(element, "plugin_" + pluginName)[options]();
        }
    }
  return the_return;
};

这样，您可以调用插件的其他功能，如goto。

在代码中，您只需要像这样调用刷新函数：

$("#id_of_container").slidesjs("refresh");

或者，如果您想刷新并跳转到另一张幻灯片，请按以下方式调用：

$("#id_of_container").slidesjs("refresh",number_of_slide);

其中number_of_slide是从0开始的int数;

Answer 3

这是我的复制和粘贴解决方案。删除单个当前选项卡。

$('#SLIDESID').slidesjs({
    //...
});

// ... later somewhere else ... //

var currentIndex = $('#SLIDESID').data().plugin_slidesjs.data.current;

//remove active tab
$('#SLIDESID [slidesjs-index="' + currentIndex + '"]').remove();
$('#SLIDESID [data-slidesjs-item="' + currentIndex  + '"]').parent().remove();

//reindex tabs
var tabs = $('#SLIDESID [slidesjs-index]');
tabs.each(function(idx, elem){
    $(elem).attr('slidesjs-index', idx);
});

//reindex pagination
$('#SLIDESID [data-slidesjs-item]').each(function(idx, elem){
    $(elem).attr('data-slidesjs-item', idx);
    $(elem).text(idx+1);
});

//tweek plugin data
$('#SLIDESID').data().plugin_slidesjs.data.total = tabs.length;
$('#SLIDESID').data().plugin_slidesjs.data.current--;

//animate to new element by clicking on NEXT
$('#SLIDESID .slidesjs-next').click();

刷新幻灯片

3 个答案: