setInterval()-JavaScriptネイティブ関数

setInterval()メソッド

setInterval()メソッドの詳細

 動 作 

引数で指定した時間の間隔で、引数で指定した関数を実行する関数。

 

 引 数 

関数：実行したい処理。
時間（処理を置こうなう間隔）：上記関数を実行する間隔

 

setInterval()メソッドを使ったコード例

 HTML 

<h2>setIntervalを使って一定間隔でスライドさせる。</h2>  
<div class="oyabox1">      
<span class="koboxA">子要素ボックスA</span>
<span class="koboxB">子要素ボックスB</span>
<span class="koboxC">子要素ボックスC</span>
</div>

 CSS 

.koboxA{
      background-color:orange;
}
.koboxB{
      background-color:yellow;
}
.koboxC{
      background-color:olive;
}
div.oyabox1{
      position:relative;
      background-color:navajowhite;
      width:300px;
      height:200px; 
      margin:20px auto;
}
div.oyabox1 span{
      position: absolute;
}

 jQuery 

 $('.oyabox1').each(function () {

        var $slides = $(this).find('span'), 
            slideCount = $slides.length,   
            currentIndex = 0;              
            $slides.eq(currentIndex).fadeIn();

        setInterval(showNextSlide, 5000);

        function showNextSlide () {

            var nextIndex = (currentIndex + 1) % slideCount;

            $slides.eq(currentIndex).fadeOut();

            $slides.eq(nextIndex).fadeIn();

             currentIndex = nextIndex;
        }

    });

 実装 

See the Pen
setInterval by roymoy (@roymoy)
on CodePen.