在jQuery中将Slider设置为Auto Rotate

时间:2014-11-14 04:18:25

标签: javascript jquery

我在jQuery中有一个滑块,我希望它每隔三秒自动旋转一次。我可以让它在点击时工作,或者幻灯片上的点是旋转它旋转但我不能让它自动旋转。

我尝试添加

setInterval(function(){ $('.nextSlide').click() },3000)

这是我控制幻灯片更改的jQqery代码:

 nextSlide : function(){

    if (dcs.currentSlideIndex>=dcs.slideCount-1 || inAnimation){

      return false

    }



    var self=this,

        cHeight=dcs.carouselHeight;



    inAnimation=true;

    dcs.currentSlideIndex++;



    if (dcs.currentSlideIndex+1==dcs.slideCount)

      dcs.nextButton.fadeOut();

    dcs.prevButton.fadeIn();



    self.changeSlide(dcs.currentSlideIndex);

  },



  prevSlide : function(){

    if (dcs.currentSlideIndex<=0 || inAnimation){

      return false

    }



    var self=this,

        cHeight=dcs.carouselHeight;



    inAnimation=true;

    dcs.currentSlideIndex--;

    if (dcs.currentSlideIndex==0){

      //hide the nexr arrow

      dcs.prevButton.fadeOut();

    }

    dcs.nextButton.fadeIn();

    self.changeSlide(dcs.currentSlideIndex);



  },

  gotoSlide:function(sIndex){

    var self=this,

        cHeight=dcs.carouselHeight;



    inAnimation=true;



    self.changeSlide(sIndex);



  },

  changeSlide:function(sIndex){

    var self=this,

        cHeight=dcs.carouselHeight;



    self.$elem.trigger('start-change');

    self.updateCounter(dcs.currentSlideIndex);

    (new TimelineLite({onComplete:function(){

      inAnimation=false;

      self.$elem.trigger('end-change');

    }

    }))

      .to(dcs.rightWrapper,dcs.rightSideDuration,{y:-dcs.rightDirectionSign*sIndex*cHeight,ease:Power4.easeOut})

      .to(dcs.leftWrapper,dcs.leftSideDuration,{y:-dcs.leftDirectionSign*sIndex*cHeight,ease:Power4.easeOut},'-='+dcs.rightSideDuration);  

  },

  updateCounter : function(currentSlideIndex){

    dcs.counterCurrent.html(currentSlideIndex+1);

  },

  bindUIActions: function(){

    var self = this;



    dcs.nextButton.on('click',function(){

      self.nextSlide();

    })

    dcs.prevButton.on('click',function(){

      self.prevSlide();

    })



    $(window).on('resize',function(){

      self.update();

    });



    if (dcs.mouse){

       self.scrollControll();

    }



    if (dcs.keyboard){

       self.keyboardControll();

    }



    if (dcs.touchSwipe){

      self.touchControll();

    }

    if (dcs.bulletControll){

       self.bulletControll();

    }



  },



  scrollControll:function(){

    var self=this;

    self.$elem.on('DOMMouseScroll mousewheel', function (e) { 



      if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {

          self.nextSlide();



      } else {

          self.prevSlide();



      }



    });

  },

  keyboardControll:function(){

    var self=this;



    $(document).keydown(function(e) {

      switch(e.which) {

          case 38: // up

            self.prevSlide();

          break;



          case 40: // down

          self.nextSlide();

          break;



          default: return; 

      }

      e.preventDefault(); 

    });

  },

  touchControll:function(){

    var self=this;

    self.$elem.swipe({



      swipe:function(event, direction, distance) {

        if (direction=='down'){

          self.nextSlide();

        }else if (direction=='up'){

          self.prevSlide();

        }

      }



    });

  },

0 个答案:

没有答案