javascript - 使用js焦点图每隔3秒自动轮播

Question

在以下这段代码的基础上增加焦点图每隔3s自动切换

/************** Full Screen Slider *********************/
        $(window).resize(function(){
            var height = $(window).height();
            var width  = $(window).width();
            $('.swiper-container, .swiper-slide').height(height);
            $('.swiper-container, .swiper-slide').width(width);

        })
        $(window).resize(); 


        $('.arrow-left, .arrow-right').on('click', function() {
            $('.slider-caption h2').removeClass('animated fadeInDown');
            $('.slider-caption h2').fadeIn(0).addClass('animated fadeInDown');
            $('.slider-caption p').removeClass('animated fadeInUp');
            $('.slider-caption p').fadeIn(0).addClass('animated fadeInUp');
        });

        var mySwiper = new Swiper('.swiper-container',{
            mode:'horizontal',
            loop: true,
            keyboardControl: true
          })
          $('.arrow-left').on('click', function(e){
            e.preventDefault()
            mySwiper.swipePrev()
          })
          $('.arrow-right').on('click', function(e){
            e.preventDefault()
            mySwiper.swipeNext()

        })

Answer 1

不知道，这样的是不是你想要的：

var mySwiper = new Swiper('.swiper-container', {
  mode: 'horizontal',
  loop: true,
  keyboardControl: true
});
$('.arrow-left').on('click', function(e) {
  e.preventDefault();
  mySwiper.swipePrev();
  startSwiperTimer();
});
$('.arrow-right').on('click', function(e) {
  e.preventDefault();
  mySwiper.swipeNext();
  startSwiperTimer();
});


startSwiperTimer();

var timer;
var startSwiperTimer = function () {
  clearInterval(timer);
  timer = setInterval(function () {
    mySwiper.swipNext();
  }, 2000);
};