css 左右箭头轮播图

CSS 左右箭头轮播图是一种常见的网页设计元素，它可以让网页内容更具视觉冲击力，吸引用户的注意力。接下来我们将介绍如何使用 CSS 实现一个简单的左右箭头轮播图。

/* HTML 代码 */1234>
/* CSS 代码 */.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.slider-wrapper {
    display: flex;
    width: 400%;
    transition: all 0.5s ease;
}
.slider-item {
    flex: 1 0 25%;
    height: 200px;
    text-align: center;
    line-height: 200px;
    font-size: 72px;
}
.slider-prev, .slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    font-size: 32px;
    text-align: center;
    line-height: 40px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
}
.slider-prev:hover, .slider-next:hover {
    background-color: #ccc;
}
.slider-prev {
    left: 20px;
}
.slider-next {
    right: 20px;
}
.slider-prev.disabled, .slider-next.disabled {
    opacity: 0.5;
    cursor: default;
}
    /* JS 代码 */var wrapper = document.querySelector('.slider-wrapper');
    var prevBtn = document.querySelector('.slider-prev');
    var nextBtn = document.querySelector('.slider-next');
    var currentIndex = 0;
    var totalSlides = 4;
prevBtn.addEventListener('click', function() {
if (currentIndex === 0) {
    return;
}
    currentIndex--;
    wrapper.style.transform = 'translateX(-' + (currentIndex * 25) + '%)';
    updateButtons();
}
    );
nextBtn.addEventListener('click', function() {
if (currentIndex === totalSlides - 1) {
    return;
}
    currentIndex++;
    wrapper.style.transform = 'translateX(-' + (currentIndex * 25) + '%)';
    updateButtons();
}
    );
function updateButtons() {
if (currentIndex === 0) {
    prevBtn.classList.add('disabled');
}
 else {
    prevBtn.classList.remove('disabled');
}
if (currentIndex === totalSlides - 1) {
    nextBtn.classList.add('disabled');
}
 else {
    nextBtn.classList.remove('disabled');
}
}
    

以上就是一个简单的 CSS 左右箭头轮播图的实现示例，通过 flex 布局实现轮播图的排列，通过 translateX 属性实现轮播图的滚动效果，通过 JavaScript 监听箭头按钮的点击事件并实现相应的滚动效果和按钮样式更新。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！