2016-08-11 1 views
1

어떻게 자동으로 슬라이드를 만드나요? 나는 수동으로 슬라이드 할 수 있도록 이미 만들었지 만, 동시에 움직이기를 원합니다.JS를이 코드에 추가하면 자동으로 슬라이드됩니까?

var slideIndex = 1; 
showSlides(slideIndex); 

function plusSlides(n) { 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 

    if (n > slides.length) { 
     slideIndex = 1 
    } 
    if (n < 1) { 
     slideIndex = slides.length 
    } 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    slides[slideIndex - 1].style.display = "block"; 
    dots[slideIndex - 1].className += " active"; 
} 
}; 
+0

[Fiddle] (https://jsfiddle.net/)에 이것을 넣어 주시겠습니까? – wahwahwah

답변

0

아래 코드를 사용하면 효과가 있습니다.

var slideIndex = 1; 
    $(function() { 
     automaticSlider(); 
    }) 

    function automaticSlider() { 
     showSlides(slideIndex); 
     setInterval(function() { automaticSlider(); }, 1000) // 1000 is 1 sec before calling next slide. 
    } 

function plusSlides(n) { 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 

    if (n > slides.length) { 
     slideIndex = 1 
    } 
    if (n < 1) { 
     slideIndex = slides.length 
    } 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    slides[slideIndex - 1].style.display = "block"; 
    dots[slideIndex - 1].className += " active"; 
} 
}; 

부하 automaticSlider 함수()를 호출하고 설정 간격은 1 초 후에 automaticSlider() 함수를 호출한다. 당신은 당신의 설득에 따라 시간을 늘릴 수 있습니다.

+0

'slideIndex'는 당신의 예제에서 undefinded되고 인덱스는 증가하거나 감소하지 않습니다. – empiric

+0

그때까지 전체 코드를 추가하지 않았지만, 지금은 !! 코드를 업데이트했습니다. –

+0

고마워요! @nalinaggarwal – Valeriadg

관련 문제