は、私はこのコードを持って、私は本当にそれのように純粋なCSSでこのスライダ自動再生

.slider-container { 
 
\t width: 1000px; 
 
\t height: 500px; 
 
\t background-color: skyblue; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t margin-top: 0px; 
 
\t text-align: center; 
 
\t overflow: hidden; 
 
\t position: relative; 
 
\t border-style: solid; 
 
\t border-radius: 5px; 
 
\t border-color: skyblue; 
 
} 
 
.menu { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t z-index: 900; 
 
\t width: 100%; 
 
\t bottom: 0; 
 
} 
 
.menu label { 
 
\t cursor: pointer; 
 
\t display: inline-block; 
 
\t width: 16px; 
 
\t height: 16px; 
 
\t background: #fff; 
 
\t border-radius: 50px; 
 
\t margin: 0 .2em 1em; 
 
\t &:hover { 
 
\t \t background: red; 
 
\t } 
 
} 
 
.slide { 
 
\t width: 1000px; 
 
\t height: 500px; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 100%; 
 
\t padding: 8em 1em 0; 
 
\t background-size: cover; 
 
\t background-position: 50% 50%; 
 
\t transition: left 0s .75s; 
 
} 
 
[id^="slide"]:checked+.slide { 
 
\t left: 0; 
 
\t z-index: 100; 
 
\t transition: left .65s ease-out; 
 
} 
 
.slide-1 { 
 
\t background-image: url("http://all4desktop.com/data_images/original/4238179-pictures.jpg"); 
 
} 
 
.slide-2 { 
 
\t background-image: url("http://www.qygjxz.com/data/out/180/4210843-picture.jpg"); 
 
} 
 
.slide-3 { 
 
\t background-image: url("http://www.qygjxz.com/data/out/179/5793047-picture.jpg"); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <div class="slider-container"> 
 
\t \t <div class="menu"> 
 
\t \t \t <label for="slide-dot-1"></label> <label for="slide-dot-2"></label> <label for="slide-dot-3"></label> 
 
\t \t </div><input checked id="slide-dot-1" name="slides" type="radio"> 
 
\t \t <div class="slide slide-1"></div><input id="slide-dot-2" name="slides" type="radio"> 
 
\t \t <div class="slide slide-2"></div><input id="slide-dot-3" name="slides" type="radio"> 
 
\t \t <div class="slide slide-3"></div> 
 
\t </div> 
 
    </body> 
 
    </html>

ください。手動で操作したので自動再生にする方法を学びたかったのです。

出典

2017-10-16 Johny Pineda

あなたが見ることができるバニラJSカルーセルです。ユーザーが手動で矢印をクリックすると、スライドしてスライドします。

//Changed index so 1 is actually first image, rather than starting at 0 index 
 
var index = 1; 
 
var paused = false; 
 
var slideShow = []; 
 

 
for (i=0; i<document.getElementsByClassName("slideShow").length; i++) { 
 
    slideShow[i] = document.getElementsByClassName("slideShow")[i]; 
 
    slideShow[i].style.display = "none"; 
 
} 
 

 
slideShow[0].style.display = "inline"; 
 

 
var slides = setInterval(function() { 
 
    if (index < slideShow.length) { 
 
    index++; 
 
    showDivs(); 
 
    } 
 
    else { 
 
    index = 1; 
 
    showDivs(); 
 
    } 
 
},1000); 
 

 
function control(n) { 
 
    clearInterval(slides); 
 

 
    if (index+n > slideShow.length) { 
 
    index = 1; 
 
    } 
 
    else if (index+n <= 0) { 
 
    index = slideShow.length; 
 
    } 
 
    else { 
 
    index += n; 
 
    } 
 
    showDivs(); 
 
} 
 

 
function showDivs() { 
 
    //Hide all slideShow elements, and then show only the targeted element 
 
    for (let i=1; i<=slideShow.length; i++) { 
 
    slideShow[i-1].style.display = "none"; 
 
    } 
 
    slideShow[index-1].style.display = "inline"; 
 
}

<button onclick="control(-1)" class="arrows" id="left"><</button> 
 
<p class="slideShow">1</p> 
 
<p class="slideShow">2</p> 
 
<p class="slideShow">3</p> 
 
<p class="slideShow">4</p> 
 
<p class="slideShow">5</p> 
 
<button onclick="control(1)" class="arrows" id="right">></button>

出典

2017-10-17 18:48:44

ちょっとそれは

を自動再生するために無限の移行期間を使用します

出典

2017-10-17 18:52:21 habib

は、私はこのコードを持って、私は本当にそれのように純粋なCSSでこのスライダ自動再生

答えて

関連する問題