Natives JS implementiert Karussell
Seitenlayout
Legen Sie einen übergeordneten Container als Maske fest, und der untergeordnete Container enthält das abzuspielende Bild. Der untergeordnete Container
ist ein Flex-Layout, sodass die Elemente horizontal angeordnet sind.
Das Bildelement im untergeordneten Container flex-shrink:0sorgt dafür, dass das Element nicht angezeigt wird komprimiert
Die Bewegung des Karussells wird durch Linkswechsel des Teilbehälters realisiert
Prinzip
- Verwenden Sie zuerst die Methode am Anfang und Ende des Bildes,
insertBeforeappendChildcloneNodeum den ersten und letzten Bildklon am Anfang und Ende hinzuzufügen - Verschieben Sie dann das übergeordnete Element nach links um eine Bildschirmbreite nach links. Nur so kann das zweite Bild (da am Anfang und am Ende ein Bild hinzugefügt wird, also das ursprüngliche erste Bild zum zweiten Bild wird) zum ersten Bild im sichtbaren Bereich werden
transition:left 0.5s linearNahtloser Übergang von Ende zu Ende durch Hinzufügen und Löschen von Attributen zu Elementen- Sein Zweck ist es, die letzte Karte zu spielen und gleichzeitig mit der ersten zu tauschen. Da das letzte Bild das gleiche wie das erste Bild ist, nimmt der Benutzer die schnelle Änderung seiner Linken nicht wahr
der Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="swiper">
<div class="slider">
<img src="https://img.alicdn.com/imgextra/i4/6000000005291/O1CN01mr9XQt1oxKHmEckLQ_!!6000000005291-0-octopus.jpg" alt="">
<img src="https://gtms03.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg" alt="">
<img src="https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg" alt="">
<img src="https://gtms02.alicdn.com/tps/i2/TB10vPXKpXXXXacXXXXvKyzTVXX-520-280.jpg" alt="">
</div>
<div class="control" id="left"><</div>
<div class="control" id="right">></div>
</div>
<script>
var currentIndex = 1;
var slider = document.getElementsByClassName('slider')[0];
function left(){
if(currentIndex === 0){
slider.style.left = 4*(-520) + 'px';
slider.style.transition = 'left 0s';
currentIndex = 4;
setTimeout(() => {
currentIndex--;
play(currentIndex);
}, 1);
}else{
currentIndex--;
play(currentIndex);
}
}
function right(){
if(currentIndex === 5){
slider.style.left = 1*(-520) + 'px';
slider.style.transition = 'left 0s';
currentIndex = 1;
setTimeout(() => {
currentIndex++;
play(currentIndex);
}, 1);
}else{
currentIndex++;
play(currentIndex);
}
}
function play(index){
slider.style.left = index*(-520) + 'px';
slider.style.transition = 'left 0.5s linear';
console.log(currentIndex)
}
(function initSwiper(){
var firstImg = slider.firstElementChild.cloneNode(true);
var lastImg = slider.lastElementChild.cloneNode(true);
slider.appendChild(firstImg);
slider.insertBefore(lastImg,document.getElementsByTagName('img')[0])
slider.style.left = '-520px';
document.getElementById('left').addEventListener('click',left);
document.getElementById('right').addEventListener('click',right);
play(1);
})();
function autoPlay(){
setInterval(() => {
right()
}, 1200);
}
autoPlay();
</script>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: content-box;
}
.swiper{
width: 520px;
height: 280px;
margin: 20px auto;
border-radius: 10px;
border: 2px solid green;
position: relative;
overflow: hidden;
}
.slider{
width: 100%;
height: auto;
display: flex;
position: relative;
}
.slider > img{
display: block;
width: 100%;
flex-shrink: 0;
}
.control{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
text-align: center;
height: 50px;
background-color: rgba(160,160,160,0.8);
font-size: 30px;
font-weight: bold;
line-height: 50px;
color: white;
}
.control:nth-child(3){
right: 0;
}