设置一个一次可以显示4张照片的走马灯
时间: 2024-02-13 16:05:11 浏览: 20
可以使用CSS3的flexbox属性和动画来实现一次可以显示4张照片的走马灯。以下是一个示例代码:
```html
<div class="carousel">
<div class="carousel-inner">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
<img src="image6.jpg">
</div>
</div>
<style>
.carousel {
width: 80%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel-inner img {
width: calc(100% / 4);
flex-shrink: 0;
margin-right: 10px;
}
</style>
<script>
const carouselInner = document.querySelector('.carousel-inner');
let position = 0;
function moveCarousel(direction) {
const carouselWidth = document.querySelector('.carousel').offsetWidth;
const imageWidth = document.querySelector('.carousel-inner img').offsetWidth + 10;
let newPosition = position + (direction === 'prev' ? imageWidth : -imageWidth);
newPosition = Math.max(newPosition, -((carouselInner.children.length * imageWidth) - carouselWidth));
newPosition = Math.min(newPosition, 0);
carouselInner.style.transform = `translateX(${newPosition}px)`;
position = newPosition;
}
document.querySelector('.prev').addEventListener('click', () => moveCarousel('prev'));
document.querySelector('.next').addEventListener('click', () => moveCarousel('next'));
</script>
```
其中,使用了CSS3的flexbox属性将图片布局为一行,并设置每个图片的宽度为容器宽度的1/4,同时设置了margin-right为10px来产生间隔。使用了JavaScript来控制图片的移动,每次移动一个图片的宽度加上间隔的距离,同时限制移动的范围。