Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/391.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/81.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript OOP滑块在创建新实例时工作不正常_Javascript_Jquery_Oop - Fatal编程技术网

Javascript OOP滑块在创建新实例时工作不正常

Javascript OOP滑块在创建新实例时工作不正常,javascript,jquery,oop,Javascript,Jquery,Oop,我已经为这段代码挣扎了一周,但我无法使这个滑块正常工作。当我创建此对象的单个实例时,代码本身工作正常,但当我添加多个实例时,它会变得疯狂。如果有人能看一看并透露一些信息,我们将不胜感激:) 以下是jQuery: "use strict"; var totalSlides; var currentSlide = 1; var intervalo; function Slider(velAnim,pausa,slider,anchoSlide){ this.velAnim = velAni

我已经为这段代码挣扎了一周,但我无法使这个滑块正常工作。当我创建此对象的单个实例时,代码本身工作正常,但当我添加多个实例时,它会变得疯狂。如果有人能看一看并透露一些信息,我们将不胜感激:)

以下是jQuery:

"use strict";
var totalSlides;
var currentSlide = 1;
var intervalo;

function Slider(velAnim,pausa,slider,anchoSlide){
    this.velAnim = velAnim;
    this.pausa = pausa;
    this.$slider = $(slider);//Slider content
    this.anchoSlide = anchoSlide;
    this.idSlider = "#"+this.$slider.attr("id");// get the id of the slider's container
    this.$slides = this.$slider.find(".slides"); // ul slides
    this.$slides.attr("id",this.$slider.attr("id") + "_slides");//create a new id for the slider
    this.idSlides = "#"+this.$slides.attr("id"); // get the new id of the slider
    this.$slides = $(this.idSlides); 
    $(this.idSlides + " .slide:first-child").clone().appendTo($(this.idSlides));//clone first slide to close the loop
    return this;
}

Slider.prototype.slideOn = function(){
    var $contSlides = $(this.idSlides);
    var ancho = this.anchoSlide;
    totalSlides = $contSlides.find(".slide");
    totalSlides = totalSlides.length;
    intervalo = setInterval(function(){
        $contSlides.animate({"margin-left":"-="+ancho},this.velAnim,function(){
            currentSlide++;
            if(currentSlide === totalSlides){
                currentSlide = 1;
                $contSlides.css("margin-left",0);
            }
        });
    }, this.pausa);
};

var Slider1 = new Slider(1000,3000,"#sliderTop",1140); //until here it works fine
Slider1.slideOn();

var Slider2 = new Slider(1400,3000,"#sliderBottom",1140);//it breaks when creating a second instance
Slider1.slideOn();`
以下是HTML:

<div class="contenedor slider" id="sliderTop">
    <ul class="slides">
        <li class="slide"><img src="assets/imgSlider/slide1.jpg"></li>
        <li class="slide"><img src="assets/imgSlider/slide2.jpg"></li>
        <li class="slide"><img src="assets/imgSlider/slide3.jpg"></li>
        <li class="slide"><img src="assets/imgSlider/slide4.jpg"></li>
    </ul>
</div>


好吧,不要在实例外部的全局变量中存储重要的实例特定部分,如
totalSlides
currentSlide
intervalo
!?哦,哇,如此明显,但如此正确!!!它像一个迷人的谢谢你非常工作!!!你救了我的命