setTimeout, setInterval, 이전 다음 슬라이드

setTimeout

setTimeout(function(){ }, 1000)  //1초후에 실행 
setInterval(function(){ }, 1000)  //1초마다 실행


var count = 5;
var settime = setInterval(function(){
  count -= 1;
  if (count > 0) {
    document.querySelector('.atext').innerHTML = count;
  } else {
    document.querySelector('#albox').style.display = 'none';
    clearTimeout(settime);
  }
}, 1000);

---

setInterval 슬라이드

var slides = $('.slides li'),
    slideCount = slides.length,
    currentIndex = 0;

slides.eq(currentIndex).fadeIn();

var timer = setInterval(showNextSlide, 3500);

function showNextSlide(){
    var nexIndex = (currentIndex + 1) % slideCount;
    slides.eq(currentIndex).fadeOut();
    slides.eq(nexIndex).fadeIn();
    currentIndex = nextIndex;
}

function timeron(){
    setInterval(showNextSlide, 3500);
}

function timeroff(){
    clearInterval(timer);
}

slides.mouseenter(function(){
    timeroff()
})
.mouseleave(function(){
    timeron()
})

---

이전 다음, 인디케이터 있는 슬라이드 

var container = $('.slideShow'),
    slideGroup = container.find('.slideshow_slides'),
    slides = slideGroup.find('a'),
    nav = container.find('.slideshow_nav'),
    indicator = container.find('.indicator'),
    slideCount = slides.length,
    indicatorHtml = '',
    currentIndex = 0,
    duration = 500,
    easing = 'easeInOutExpo',
    interval = 3500,
    timer;

slides.each(function(i){
    var newLeft = i * 100 + '%'
    $(this).css({left: newLeft});
    indicatorHtml += '<a href="#">'+ (i + 1) +'</a>';
});

indicator.html(indicatorHtml);

function goToSlide(index){
    slideGroup.animate({left:-100*index + '%'}, 3500, easing);
    currentIndex = index;
    updateNav();

    
};

function updateNav(){
    var navPrev = nav.find('.prev');
    var navNext = nav.find('.next');

    if(currentIndex == 0){
        navPrev.addClass('disabled');
    }else{
        navPrev.removeClass('disabled');
    }
    if(currentIndex == slideCount - 1){
        navNext.addClass('disabled');
    }else{
        navNext.removeClass('disabled');
    }
    indicator.find('a').eq(currentIndex).addClass('active').siblings().removeClass('active');

}
updateNav();

indicator.find('a').click(function(e){
    e.preventDefault();
    var idx = $(this).index();
    goToSlide(idx);
   
});

nav.find('a').click(function(e){

    e.preventDefault();
    if ( $(this).hasClass('prev') ){
        goToSlide(currentIndex - 1);
    } else {
        goToSlide(currentIndex + 1);
    }
    
})

function startTimer(){
   timer =  setInterval(function(){
    var nextIndex = (currentIndex + 1) % slideCount;
    goToSlide(nextIndex);
   }, interval);
}

function stopTimer(){
    clearInterval(timer);
}

container.mouseenter(function(){
    stopTimer()
})
.mouseleave(function(){
    startTimer()
})