2016-08-11 5 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'はあなたの例では定義されておらず、インデックスは増分または減分されていません。 – empiric

+0

それまではコード全体が追加されていませんでしたが、今はあります!コードを更新しました。 –

+0

ありがとうございます! @nalinaggarwal – Valeriadg

関連する問題