1

基于 adaneo 的这个带有上一个/下一个按钮的出色图像滑块，在这个答案中：图片库下一个和上一个按钮

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

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

我怎样才能重写它，以便我可以在一页中使用它两次？我会将整个事情变成它自己的函数，最后杀死变量值，然后将它复制到一个新函数中，并为第二个画廊提供新的选择器吗？或者？

非常感谢收到回答此类问题的 JSFiddles 的建议/链接，谢谢。

4

1 回答 1

2

您需要为display、next、prev和img-list以及display在 CSS 中设置每个样式的唯一 ID。

演示

(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('<img src="'+$(E[N]).attr('href')+'" />');
                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('<img src="'+$(E[N]).attr('href')+'" />');
                });
                E.on('click', function(e) {
                    var S = $(this).attr('href');
                    $($this).html('<img src="'+S+'" />');
                    e.preventDefault();
                });
            });
        }
    });
})(jQuery);


$("#display").gallerify({imgList:'#img-list',next:'#next',prev:'#prev'});
$("#display2").gallerify({imgList:'#img-list2',next:'#next2',prev:'#prev2'});
于 2012-08-03T18:26:12.220 回答