轮播怎么写

轮播可以用如下的HTML和CSS代码来实现：

HTML代码：

CSS代码：

.carousel {

position: relative;

width: 100%;

height: 300px; /* 设置轮播的高度 */

overflow: hidden;

}

.carousel-inner {

position: ABSolute;

display: flex;

transition: transform 0.5s ease;

}

.carousel-item {

height: 100%;

object-fit: cover; /* 图片按比例缩放，铺满轮播容器 */

}

.carousel-item.active {

transform: translateX(0);

}

.carousel-item {

transform: translateX(-100%);

}

.carousel-prev,

.carousel-next {

position: ABSolute;

top: 50%;

z-index: 10;

cursor: pointer;

}

.carousel-prev {

left: 10px;

}

.carousel-next {

right: 10px;

}

JS代码：

const carousel = document.querySelector('.carousel');

const carouselInner = document.querySelector('.carousel-inner');

const prevButton = document.querySelector('.carousel-prev');

const nextButton = document.querySelector('.carousel-next');

const carouselItems = document.querySelectorAll('.carousel-item');

let currentItem = 0;

function slide(direction) {

if (direction === 'prev') {

currentItem--;

} else if (direction === 'next') {

currentItem++;

}

if (currentItem === carouselItems.length) {

currentItem = 0;

} else if (currentItem < 0) {

currentItem = carouselItems.length - 1;

}

carouselInner.style.transform = translateX(-${currentItem * 100}%);

}

prevButton.addEventListener('click', () => {

slide('prev');

});

nextButton.addEventListener('click', () => {

slide('next');

});

注释： 这段JS代码添加了一个事件监听器，等待“prev”或“next”按钮的操作。然后通过slide函数来进行相应操作，滚动轮播并更新内部元素的当前索引。 最后，我们将轮播元素的transform CSS属性设置为“scroll”就可以很容易的实现轮播效果。