如何在一个页面中的两个画廊上使用带有上一个/下一个按钮的JQuery滑块？

基于这个伟大的图像滑块与adaneo的prev / next按钮，在这里的答案： 图像库下一个和上一个按钮

他的JSFiddle就在这里，它做了我需要它做的事情，除了我需要它在一个页面上的两个独立的画廊上工作： http ： //jsfiddle.net/adeneo/5VEeH/3/

这是我的分叉JSFiddle，除了复制标记之外，我没有做太多工作： http ： //jsfiddle.net/cbp9T/1/

我怎么能重新编写它以便我可以在一个页面中使用它两次？ 我会把整个事情做成自己的函数，在最后杀死变量值，然后将它复制到一个新的函数中，为第二个画廊添加新的选择器吗？ 要么？

建议/链接到JSFiddles回答这样的问题非常感谢，谢谢。

Answer 1

您需要为display ， next ， prev和img-list创建唯一的ID，并为CSS中的每个display样式。

DEMO

 (function($) { $.fn.extend({ gallerify: function(o) { return this.each(function() { var $this = "#" + this.id; var E = $("a", o.imgList), N = 0, T = E.length-1; $($this).html(''); var btns = o.next.concat(",",o.prev); $(btns).on('click', function() { var A = this.id == (o.next).substr(1,o.next.length),X=A?T:0,Y=A?0:T,Z=A?N+1:N-1;N=N==X?Y:Z; $($this).html(''); }); E.on('click', function(e) { var S = $(this).attr('href'); $($this).html(''); e.preventDefault(); }); }); } }); })(jQuery); $("#display").gallerify({imgList:'#img-list',next:'#next',prev:'#prev'}); $("#display2").gallerify({imgList:'#img-list2',next:'#next2',prev:'#prev2'});