CSSのプロパティを変更するためにインターバル時間を持つオブジェクトをループする方法

Question

私は、バックグラウンドイメージを3秒ごとに他のイメージに変更するためにJavaScriptオブジェクトをループしようとしています。

私はsetIntervalを使用することを知っています。forループはオブジェクトを通過し、jQueryはCSSにアクセスして背景を変更します。しかし、私は、使用する方法について確認していない一緒に

HTML

<div class="example"></div> 

CSS

.example { 
    height: 600px; 
    background-image: url(path/pic01.jpeg); } 

JS

var header = { 
pic01 : 'url(path/pic02.jpeg)', 
pic02 : 'url(path/pic03.jpeg)', 
pic03 : 'url(path/pic04.jpeg)', 
pic04 : 'url(path/pic05.jpeg)'} 

私が試したことのすべて：

var counter = 0; 
    var i = setInterval(function(){ 


    counter++; 
    if(counter === 5) { 
     clearInterval(i); 
    } 
}, 3000); 

などです。しかし、私はそれを完了するように見えることはできません

for (var key in header) { 
if (header.hasOwnProperty(key)) { 
console.log(header[key]); 

}) 

} 

Answer 1

まず、ヘッダー画像の配列を使用すると、少し楽になります。以下は、配列の長さに達すると0のインデックスから始まり、すべての要素が一度表示されるまで配列を1回ループする無限ループの2つの関数です。 （あなたはdiv要素にテキストを書くのではなく、自分のニーズに合わせて調整する必要があります...）。このコードブロックで

var header = [ 
 
    'url(path/pic02.jpeg)', 
 
    'url(path/pic03.jpeg)', 
 
    'url(path/pic04.jpeg)', 
 
    'url(path/pic05.jpeg)' 
 
]; 
 
var i = 0; 
 

 
function loopInfinite(arr) { 
 
    document.getElementById('foo').innerHTML = arr[i]; 
 
    i++; 
 
    if (i === arr.length) i = 0; 
 
    setTimeout(() => { 
 
    loopInfinite(arr); 
 
    }, 500); 
 
} 
 

 
function loopOnce(arr) { 
 
    document.getElementById('foo').innerHTML = arr[i]; 
 
    i++; 
 
    if (i < arr.length) { 
 
    setTimeout(() => { 
 
     loopOnce(arr); 
 
    }, 500); 
 
    } 
 
} 
 

 

 
loopInfinite(header);

<div id="foo"></div>

Answer 2

：

var counter = 0; 
    var i = setInterval(function(){ 


    counter++; 
    if(counter === 5) { 
     clearInterval(i); 
    } 
}, 3000); 

をあなたは持っていませんあなたの背景更新コードが含まれています。このようなものがあなたが探しているものかもしれません：

var imageNumber = 0; 
var counter = 0; 
    var i = setInterval(function(){ 

    counter++; 
    if(counter === 5) { 

     // your background-updating code 
     $('.example').css('background-image',headers['pic0' + imageNumber]); 
     imageNumber++; 
     if (imageNumber > headers.length) { 
      imageNumber = 0; 
     } 


     clearInterval(i); 
    } 
}, 3000); 

Answer 3

なぜCSSを使用しませんか？

html, body { 
 
    position: relative; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, body, .example { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.example { 
 
    background-color: #333; 
 
    background-size: contain; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    animation-name: gallery; 
 
    animation-duration: 12s; 
 
    animation-timing-function: steps(1, start); 
 
    animation-iteration-count: infinite; 
 
} 
 

 
@keyframes gallery { 
 
    0%, 100% { 
 
    background-image: url(https://placebear.com/145/201) 
 
    } 
 
    25% { 
 
    background-image: url(https://placebear.com/395/205) 
 
    } 
 
    50% { 
 
    background-image: url(https://placebear.com/150/200) 
 
    } 
 
    75% { 
 
    background-image: url(https://placebear.com/145/300) 
 
    } 
 
}

<div class="example"></div>