視差カルーセル

Question

「カルーセル」のように動作させるために、10秒ごとに背景を変更する必要があるプロジェクトに取り組んでいます。

div class="parallax"> 

：なぜここに助け

ためにあなたたちを尋ねるi'amは、HTMLとCSSのコードであり、それは私が必要なのjavascriptが

HTMLで助けとなるように、しかし、私は実用的なソリューションを見つけるカント

のCss

.parallax { 
background-image: url("../img/1.jpg"); 
height: 500px; 
background-attachment: fixed; 
background-position: center; 
background-repeat: no-repeat; 
background-size: cover; } 

私は何もしてあなたの助けに感謝あなたが私を助けることができる

Answer 1

このことができます参照してください：https://jsfiddle.net/zaedmfLs/

var myIndex = 0; 
 
setInterval(carousel, 2000); 
 

 
function carousel() { 
 
    var i; 
 
    var x = document.getElementsByClassName("myslides"); 
 
    for (i = 0; i < x.length; i++) { 
 
    \t console.log("Carousel"); 
 
     x[i].style.display = "none"; 
 
    } 
 
    myIndex++; 
 
    
 
    if (myIndex > x.length) {myIndex = 1} 
 
    x[myIndex-1].style.display = "block"; 
 
}

<div class="photobanner" style="max-height:460px"> 
 
     <img class="myslides" src="http://www.gstatic.com/webp/gallery/1.jpg" style="height:100%" /> 
 
     <img class="myslides" src="http://www.gstatic.com/webp/gallery/2.jpg" style="height:100%" /> 
 
     <img class="myslides" src="http://www.gstatic.com/webp/gallery/1.jpg" style="height:100%" /> 
 
     <img class="myslides" src="http://www.gstatic.com/webp/gallery/2.jpg" style="height:100%" /> 
 
     <img class="myslides" src="http://www.gstatic.com/webp/gallery/1.jpg" style="height:100%" /> 
 
     <img class="myslides" src="http://www.gstatic.com/webp/gallery/2.jpg" style="height:100%" /> 
 
    </div>

を