刷新幻灯片

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

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

谢谢

Answer 1

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

这是我的解决方案：

在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 = $("", { "class": "slidesjs-previous slidesjs-navigation", href: "#", title: "Previous", text: "Previous" }).appendTo($element); nextButton = $("", { "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 = $("", { "class": "slidesjs-play slidesjs-navigation", href: "#", title: "Play", text: "Play" }).appendTo($element); stopButton = $("", { "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 = $("
", { "class": "slidesjs-pagination" }).appendTo($element); $.each(new Array(this.data.total), function(i) { var paginationItem, paginationLink; paginationItem = $("
", { "class": "slidesjs-pagination-item" }).appendTo(pagination); paginationLink = $("", { 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; }; 

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

在代码中，您只需要调用刷新函数，如下所示：

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

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

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

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

Answer 2

我想出了一个（相当时髦）的解决方案。 它可能不是最好的方法，因为使用了大量的DOM操作/启动插件，但我希望你能得到这个想法。 结果可以在这个JSFiddle上找到 。

HTML

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 = $("
") .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 = $("
") .append($originalClone) .appendTo($("body")); // Add the new image to the newly created slider $("") .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 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();