0
3つのCSSクラス/フェーズがあります。バニラのJavascriptスライダが動作しない
アクティブなクラスは、表示されている現在の背景です。
前の背景に非アクティブなクラスが与えられます。そして、背景を画面の左にスライドさせます。
トランスポートクラスは、非アクティブなクラスを受信した後、バックグラウンドに与えられます。トランスポートクラスはバックグラウンドを画面の右側に戻します。
何らかの理由でスライダが非アクティブなクラスを完全に無視します。背景は決して画面の左にスライドしません。
var slides = document.getElementsByClassName('bg');
var i = 0;
// When page loads show first background
(function() {
slides[i].className += ' active';
i++;
})();
function changeSlide() {
// Slide previous slide to the left of the screen
if(i === 0) {
slides[2].className = 'bg unactive';
}
else {
slides[i - 1].className = 'bg unactive';
}
// Slide the current slide in from the right of the screen
slides[i].className += ' active';
// Make the slide go back to the right of the screen
if(i === 0) {
slides[2].className = 'bg transport';
slides[2].className = 'bg';
}
else {
slides[i - 1].className = 'bg transport';
slides[i - 1].className = 'bg';
}
i++
if(i === slides.length) {
i = 0;
}
}
setInterval(changeSlide, 2000);* {
margin: 0;
padding: 0;
}
html, body, .bg {
width: 100%;
height: 100%;
}
.bg {
position: absolute;
left: 100%;
background-color: tan;
-webkit-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
/* The background that is shown */
.active {
position: absolute;
left: 0;
}
/* Make the background go to the left of the screen */
.unactive {
position: absolute;
left: -100%;
}
/* Hide the background and make it go back to the right of the screen */
.transport {
display: none;
position: absolute;
left: 100%;
z-index: -1;
}<!-- background 1 -->
<div class="bg" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg)">
</div>
<!-- background 2 -->
<div class="bg" style="background-image: url(https://cdn.pixabay.com/photo/2015/03/29/01/54/tree-696839_960_720.jpg)">
</div>
<!-- background 3 -->
<div class="bg" style="background-image: url(http://www.slate.com/content/dam/slate/articles/health_and_science/science/2017/06/170621_SCI_TreePlantingHoax.jpg.CROP.promo-xlarge2.jpg)"></div>このcodepenをチェックしてください。私は上記の同じコードをjavascriptコードのブロックをコメントアウトして除いている。スライドが出入りするのを見てください。それが私がそれを望む方法です。しかし、私はスライダを無限に繰り返して止まらないようにしたい。
https://codepen.io/anon/pen/aVoNNd