Javascript OOP滑块在创建新实例时工作不正常
我已经为这段代码挣扎了一周,但我无法使这个滑块正常工作。当我创建此对象的单个实例时,代码本身工作正常,但当我添加多个实例时,它会变得疯狂。如果有人能看一看并透露一些信息,我们将不胜感激:) 以下是jQuery: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
"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
!?哦,哇,如此明显,但如此正确!!!它像一个迷人的谢谢你非常工作!!!你救了我的命