css 旋转木马循环香草JS POC
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 旋转木马循环香草JS POC相关的知识，希望对你有一定的参考价值。
const carousel = element => {
const com = {
carousel: element.querySelector('.carousel'),
leftArrow: element.querySelector('.arrow--left'),
rightArrow: element.querySelector('.arrow--right')
};
const numberOfSlides = element.dataset.numberOfSlides;
let pos = 0;
let nextPos = 0;
let active = 0;
const quota = 100 / numberOfSlides;
const slidesCount = com.carousel.children.length;
const step = (time) => {
setTimeout(() => {
for (let i = 0; i < slidesCount; i++) {
const index = (active + i) % slidesCount;
const slide = com.carousel.children[index];
slide.style.position = 'absolute';
slide.style.left = `${quota * i + nextPos}vw`;
}
}, time);
};
const initialize = carousel => {
carousel.children[active].classList.add('active');
};
const next = function () {
pos -= quota;
nextPos += quota;
com.carousel.children[active].classList.remove('active');
active = active + 1 > com.carousel.children.length - 1 ? 0 : active + 1;
com.carousel.style.transform = `translateX(${pos}vw)`;
com.carousel.children[active].classList.add('active');
step(300);
};
const prev = function() {
pos += quota;
nextPos -= quota;
com.carousel.children[active].classList.remove('active');
active = active - 1 < 0 ? com.carousel.children.length - 1 : active - 1;
com.carousel.style.transform = `translateX(${pos}vw)`;
com.carousel.children[active].classList.add('active');
step(0);
};
initialize(com.carousel);
com.leftArrow.addEventListener('click', prev);
com.rightArrow.addEventListener('click', next);
};
document.querySelectorAll('.carousel-element').forEach(carousel);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Carousel POC</title>
<link rel="stylesheet" href="carousel.css">
</head>
<body>
<div class="carousel-element" data-number-of-slides="3">
<div class="carousel-wrapper">
<div class="arrow arrow--left"></div>
<div class="arrow arrow--right"></div>
<div class="carousel">
<div class="carousel-item">
<div class="carousel-item__image">
<a href="#">
<img src="https://media.allure.com/photos/5b88339c728b37156b602b9b/1:1/w_767/straightener-lede.jpg" alt="Image">
</a>
</div>
<div class="carousel-item__info">
<div class="info__title">
Title 1
</div>
<div class="info__description">
Description 1
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item__image">
<a href="#">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPSc-p_tkbgiCa0uA2-DSEp2T9TZUX5lkHjz1AwmVTVVKrUD8_WA" alt="Image">
</a>
</div>
<div class="carousel-item__info">
<div class="info__title">
Title 2
</div>
<div class="info__description">
Description 2
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item__image">
<a href="#">
<img src="https://i.pinimg.com/originals/40/f2/3a/40f23af43172afa0136c5db8361d7217.jpg" alt="Image">
</a>
</div>
<div class="carousel-item__info">
<div class="info__title">
Title 3
</div>
<div class="info__description">
Description 3
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item__image">
<a href="#">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlC-yx_5AMq6EqTJTk1ozwgCUk8W6rxZopcCKFENULBGO9zaJWQg" alt="Image">
</a>
</div>
<div class="carousel-item__info">
<div class="info__title">
Title 4
</div>
<div class="info__description">
Description 4
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item__image">
<a href="#">
<img src="https://media.allure.com/photos/5b88339c728b37156b602b9b/1:1/w_767/straightener-lede.jpg" alt="Image">
</a>
</div>
<div class="carousel-item__info">
<div class="info__title">
Title 5
</div>
<div class="info__description">
Description 5
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item__image">
<a href="#">
<img src="https://cdn-img.instyle.com/sites/default/files/images/2017/09/092217-monat-hair-products-lead.jpg" alt="Image">
</a>
</div>
<div class="carousel-item__info">
<div class="info__title">
Title 6
</div>
<div class="info__description">
Description 6
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item__image">
<a href="#">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlC-yx_5AMq6EqTJTk1ozwgCUk8W6rxZopcCKFENULBGO9zaJWQg" alt="Image">
</a>
</div>
<div class="carousel-item__info">
<div class="info__title">
Title 7
</div>
<div class="info__description">
Description 7
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-element" data-number-of-slides="4">
<div class="carousel-wrapper">
<div class="arrow arrow--left"></div>
<div class="arrow arrow--right"></div>
<div class="carousel">
<div class="carousel-item">
<div class="carousel-item__image">
<a href="#">
<img src="https://media.allure.com/photos/5b88339c728b37156b602b9b/1:1/w_767/straightener-lede.jpg" alt="Image">
</a>
</div>
<div class="carousel-item__info">
<div class="info__title">
Title 1
</div>
<div class="info__description">
Description 1
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item__image">
<a href="#">
<img src="https://media.allure.com/photos/5b88339c728b37156b602b9b/1:1/w_767/straightener-lede.jpg" alt="Image">
</a>
</div>
<div class="carousel-item__info">
<div class="info__title">
Title 2
</div>
<div class="info__description">
Description 2
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item__image">
<a href="#">
<img src="https://media.allure.com/photos/5b88339c728b37156b602b9b/1:1/w_767/straightener-lede.jpg" alt="Image">
</a>
</div>
<div class="carousel-item__info">
<div class="info__title">
Title 3
</div>
<div class="info__description">
Description 3
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item__image">
<a href="#">
<img src="https://media.allure.com/photos/5b88339c728b37156b602b9b/1:1/w_767/straightener-lede.jpg" alt="Image">
</a>
</div>
<div class="carousel-item__info">
<div class="info__title">
Title 4
</div>
<div class="info__description">
Description 4
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item__image">
<a href="#">
<img src="https://media.allure.com/photos/5b88339c728b37156b602b9b/1:1/w_767/straightener-lede.jpg" alt="Image">
</a>
</div>
<div class="carousel-item__info">
<div class="info__title">
Title 5
</div>
<div class="info__description">
Description 5
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item__image">
<a href="#">
<img src="https://media.allure.com/photos/5b88339c728b37156b602b9b/1:1/w_767/straightener-lede.jpg" alt="Image">
</a>
</div>
<div class="carousel-item__info">
<div class="info__title">
Title 6
</div>
<div class="info__description">
Description 6
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item__image">
<a href="#">
<img src="https://media.allure.com/photos/5b88339c728b37156b602b9b/1:1/w_767/straightener-lede.jpg" alt="Image">
</a>
</div>
<div class="carousel-item__info">
<div class="info__title">
Title 7
</div>
<div class="info__description">
Description 7
</div>
</div>
</div>
</div>
</div>
</div>
<script src="carousel.js"></script>
</body>
</html>
body {
margin: 0;
padding: 0;
}
.carousel-element {
margin-bottom: 100px;
}
.carousel-wrapper {
position: relative;
overflow: hidden;
}
.arrow {
font-size: 40px;
cursor: pointer;
}
.arrow--left::before {
top: 50%;
position: absolute;
content: "☝";
left: 0;
transform: rotate(-90deg);
z-index: 10;
}
.arrow--right::before {
top: 50%;
position: absolute;
content: "☝";
right: 0;
transform: rotate(90deg);
z-index: 10;
}
.carousel {
position: relative;
height: 500px;
display: flex;
transition: all .3s ease-in-out;
}
.carousel-item {
}
.carousel-item:hover {
opacity: .8;
}
.carousel-element[data-number-of-slides="3"] .carousel-item__image {
height: 400px;
width: calc(100vw / 3);
}
.carousel-element[data-number-of-slides="4"] .carousel-item__image {
height: 400px;
width: calc(100vw / 4);
}
.carousel-item__image a {
}
.carousel-item__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
以上是关于css 旋转木马循环香草JS POC的主要内容，如果未能解决你的问题，请参考以下文章