一页上的多个 jquery 滑块实例

Question

我使用 jQuery 编写了一个非常简单的滑块。它的工作原理是对子 img 元素进行计数和编号，并显示与计数器变量相对应的 img，该计数器变量随着用户按下“右”按钮而增加，如果按下“左”按钮则减少。除非页面上有多个实例，否则它工作正常。（我认为因为变量是全局的）

一个按钮最终控制所有滑块的流动。此外，一次只有一个滑块会显示图像，因为它们都引用相同的变量。

有没有办法让滑块的每个实例都有自己的计数器 ($n) 和幻灯片编号 ($slides) 变量？

这是我所拥有的东西：http://jsfiddle.net/Mn4jk/2/（虽然没有实际图像）

这里是直接的html和jQuery

html:

<div>
<img src="../graphics/arrow_left.png" class="left" alt="left">
<img src="../graphics/arrow_right.png" class="right" alt="right">
<div class="carousel">
    <img src="../graphics/img1.png" alt="1">
    <img src="../graphics/img2.png" alt="2">
    <img src="../graphics/img3.png" alt="3">
</div>
</div>

jQuery:

$(window).ready(function () {

var $n = 0;
var $slides = $('.carousel img').length - 1;

$('.right').click(function () {
    if ($n <= ($slides - 1)) {
        $('.carousel img').eq($n).fadeOut('400');
        $n++;
        $('.carousel img').eq($n).delay('400').fadeIn('400');
    } else {
        $('.carousel img').eq($slides).fadeOut('400');
        $n = 0;
        $('.carousel img').eq(0).delay('400').fadeIn('400');
    }
});

$('.left').click(function () {
    if ($n >= 1) {
        $('.carousel img').eq($n).fadeOut('400');
        $n--;
        $('.carousel img').delay('400').eq($n).fadeIn('400');
    } else {
        $('.carousel img').eq(0).fadeOut('400');
        $n = ($slides)
    }
    $('.carousel img').delay('400').eq($n).fadeIn('400');
});

$('.carousel img').eq($n).fadeIn('400');
});

我知道我可以只复制代码并创建一个新类，但我更喜欢一个允许在一个页面上使用任意数量的滑块的解决方案。

Answer 1

是的，Javascript 具有允许此功能的“类”。类可以多次实例化，每个实例都有自己的一组变量、方法等。类是“面向对象编程”（OOP）的关键构建块。

有关更多信息，请在 Google 上搜索“Javascript 类”。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

注意：定义 Javascript 类有多种方法。所以那里的教程会展示不同的方法。

---

我很钦佩建立自己的意愿和愿望。但是，有很多库具有此功能（只需搜索 Javascript 库）。

作为类的示例 JSFiddle：http://jsfiddle.net/Mn4jk/4/

var Slider = function(element) {
    this.$n = 0;
    this.img = element.find(".carousel img");
    this.$slide = this.img.length-1;
    this.left = element.find(".left");
    this.right = element.find(".right");

    this.buttons();

    this.img.eq(this.$n).fadeIn('400');
}

Slider.prototype.buttons = function() {
    var that = this;

    this.right.click(function () {
        if (that.$n <= (that.$slide - 1)) {
            that.img.eq(that.$n).fadeOut('400');
            that.$n++;
            that.img.eq(that.$n).delay('400').fadeIn('400');
        } else {
            that.img.eq(that.$slide).fadeOut('400');
            that.$n = 0;
            that.img.eq(0).delay('400').fadeIn('400');
        }
    });

    this.left.click(function () {
        if (that.$n >= 1) {
            that.img.eq(that.$n).fadeOut('400');
            that.$n--;
            that.img.delay('400').eq(that.$n).fadeIn('400');
        } else {
            that.img.eq(0).fadeOut('400');
            that.$n = (that.$slide);
        }
        that.img.delay('400').eq(that.$n).fadeIn('400');
    });
};




$(window).ready(function () {
    var slider1 = new Slider(jQuery("#slider-instance"));    
});