css实现点击箭头滑动 |philips/飞利浦 css1221/93 2.1

.arrow {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 40px;
height: 40px;
cursor: pointer;
z-index: 2;
}
.arrow::before,
.arrow::after {
position: absolute;
content: "";
width: 20px;
height: 3px;
background-color: #333;
}
.arrow::before {
transform: rotate(45deg);
top: calc(50% - 2px);
left: calc(50% - 10px);
}
.arrow::after {
transform: rotate(-45deg);
top: calc(50% - 2px);
left: calc(50% + 10px);
}
.slide-container {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.slides {
width: 300%;
height: 100%;
display: flex;
transition: transform 0.3s ease;
}
.slide {
width: 33.3333%;
height: 100%;
background-color: #ccc;
flex-shrink: 0;
}
.slide:first-child {
background-color: #f00;
}
.slide:last-child {
background-color: #0f0;
}

首先，大家创建了一个箭头元素，它的样式设置了它的尺寸和位置，并使其呈指针形状。使用伪元素，大家再添加了两条斜线来形成完整的箭头。然后，大家创建了一个滑动容器，它具有一个固定的高度和一个隐藏溢出。在滑动容器中，大家有一个包含三个幻灯片的Flex容器，它们每个占据了三分之一的宽度。幻灯片的背景颜色不同，以使它们彼此区分。

最后，大家需要一些JavaScript代码来动态地添加事件监听器来处理箭头的单击事件。大家要处理左右箭头，此时它们将向左和向右相应方向移动滑动容器中的幻灯片。在事件处理程序中，大家将幻灯片容器的transform样式属性设置为一个translateX值，该值与容器宽度的一倍相乘，并根据所单击的箭头指向设置一个正负号。

const slides = document.querySelector(".slides");
const arrowLeft = document.querySelector(".arrow-left");
const arrowRight = document.querySelector(".arrow-right");
arrowLeft.addEventListener("click", () =>{
slides.style.transform = `translateX(${slides.clientWidth}px)`;
});
arrowRight.addEventListener("click", () =>{
slides.style.transform = `translateX(-${slides.clientWidth}px)`;
});

这样，大家就完成了用CSS实现点击箭头进行滑动的效果。通过上述代码，大家可以非常简便地实现一个交互效果良好的图片轮播器。欢迎读者尝试实现自己的CSS效果！