求助：为现有HTML/CSS幻灯片添加侧边箭头与10秒自动轮播

我现有一个包含4张图片的幻灯片，可通过底部4个对应按钮切换图片。希望实现以下优化：

• 添加侧边切换箭头，提升操作便捷性与样式美观度
• 实现无操作10秒后自动切换图片的功能

我可以配合使用JavaScript来实现这些功能，目前的幻灯片代码如下：

现有HTML代码 #

<html lang=fr>
    <head>
        <link rel="stylesheet" type="text/css" href="BETACSS.css">
        <link type="image/png" href="LOGO.ico">
        <title> Nexxus</title>
    </head>

    <body style="margin: 0%;padding: 0%;">
        
        <div class="BLOCDIAPO">

            <span id="slider-image-1"></span>
            <span id="slider-image-2"></span>
            <span id="slider-image-3"></span>
            <span id="slider-image-4"></span>

            <div class="CONTENEURIMG">
                <img src="1.png" class="slider-image" alt="God of War : Ragnarok">
                <img src="2.png" class="slider-image" alt="Uncharted : A Thief's End">
                <img src="3.png" class="slider-image" alt="Horizon : Forbidden West">
                <img src="4.png" class="slider-image" alt="The Last of Us : Part II">
            </div>    

            <div class="BOUTTONSPLACE">
                <a href="#slider-image-1" class="BOUTTONSDIAPO"></a>
                <a href="#slider-image-2" class="BOUTTONSDIAPO"></a>
                <a href="#slider-image-3" class="BOUTTONSDIAPO"></a>
                <a href="#slider-image-4" class="BOUTTONSDIAPO"></a>
            </div>
            
        </div>

    </body>
</html>

现有CSS代码 #

.BLOCDIAPO{
    width: 1156px;
    height: 650px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-align: center;
    border-radius: 15px;
    border-width:10px;
    border-style:solid;
    border-color:#272727;
}


.CONTENEURIMG{
    width: 4624px;
    height: 650px;
    position: relative;
    transition: left 2s;
    -webkit-transition: left 2s;
    -o-transition: left 2s;
}


.slider-image{
    float: left;
    margin: 0px;
    padding: 0px;
}

.BOUTTONSPLACE{
    top: -24px;
    position: relative;
}

.BOUTTONSDIAPO{
    display: inline-block;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    background-color: aliceblue;
}

#slider-image-1:target ~ .CONTENEURIMG{
    left: 0px;
}

#slider-image-2:target ~ .CONTENEURIMG{
    left: -1156px;
}

#slider-image-3:target ~ .CONTENEURIMG{
    left: -2312px;
}

#slider-image-4:target ~ .CONTENEURIMG{
    left: -3468px;
}

修改后的HTML代码 #

<html lang=fr>
    <head>
        <link rel="stylesheet" type="text/css" href="BETACSS.css">
        <link type="image/png" href="LOGO.ico">
        <title> Nexxus</title>
    </head>

    <body style="margin: 0%;padding: 0%;">
        
        <div class="BLOCDIAPO">
            <!-- 切换锚点保持不变 -->
            <span id="slider-image-1"></span>
            <span id="slider-image-2"></span>
            <span id="slider-image-3"></span>
            <span id="slider-image-4"></span>

            <div class="CONTENEURIMG">
                <img src="1.png" class="slider-image" alt="God of War : Ragnarok">
                <img src="2.png" class="slider-image" alt="Uncharted : A Thief's End">
                <img src="3.png" class="slider-image" alt="Horizon : Forbidden West">
                <img src="4.png" class="slider-image" alt="The Last of Us : Part II">
            </div>    

            <!-- 新增左右切换箭头 -->
            <a href="#" class="slider-arrow slider-arrow-prev" id="prev-btn"></a>
            <a href="#" class="slider-arrow slider-arrow-next" id="next-btn"></a>

            <div class="BOUTTONSPLACE">
                <a href="#slider-image-1" class="BOUTTONSDIAPO"></a>
                <a href="#slider-image-2" class="BOUTTONSDIAPO"></a>
                <a href="#slider-image-3" class="BOUTTONSDIAPO"></a>
                <a href="#slider-image-4" class="BOUTTONSDIAPO"></a>
            </div>
        </div>

        <script>
            // 自动切换与箭头切换逻辑
            const totalSlides = 4;
            let currentSlide = 1;
            let autoSlideTimer;

            // 重置自动切换定时器
            function resetAutoSlide() {
                clearTimeout(autoSlideTimer);
                autoSlideTimer = setTimeout(nextSlide, 10000);
            }

            // 切换到指定幻灯片
            function goToSlide(slideNum) {
                currentSlide = slideNum;
                document.getElementById(`slider-image-${slideNum}`).scrollIntoView({behavior: 'auto'});
                resetAutoSlide();
            }

            // 下一张幻灯片
            function nextSlide() {
                currentSlide = currentSlide % totalSlides + 1;
                goToSlide(currentSlide);
            }

            // 上一张幻灯片
            function prevSlide() {
                currentSlide = currentSlide === 1 ? totalSlides : currentSlide - 1;
                goToSlide(currentSlide);
            }

            // 绑定箭头点击事件
            document.getElementById('prev-btn').addEventListener('click', function(e) {
                e.preventDefault();
                prevSlide();
            });

            document.getElementById('next-btn').addEventListener('click', function(e) {
                e.preventDefault();
                nextSlide();
            });

            // 绑定底部按钮点击事件，重置自动切换
            document.querySelectorAll('.BOUTTONSDIAPO').forEach((btn, index) => {
                btn.addEventListener('click', function() {
                    currentSlide = index + 1;
                    resetAutoSlide();
                });
            });

            // 初始化自动切换
            resetAutoSlide();
        </script>

    </body>
</html>

修改后的CSS代码 #

.BLOCDIAPO{
    width: 1156px;
    height: 650px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-align: center;
    border-radius: 15px;
    border-width:10px;
    border-style:solid;
    border-color:#272727;
    /* 添加相对定位，让箭头可以绝对定位 */
    position: relative;
}


.CONTENEURIMG{
    width: 4624px;
    height: 650px;
    position: relative;
    transition: left 2s;
    -webkit-transition: left 2s;
    -o-transition: left 2s;
}


.slider-image{
    float: left;
    margin: 0px;
    padding: 0px;
}

.BOUTTONSPLACE{
    top: -24px;
    position: relative;
    z-index: 10; /* 确保按钮在最上层 */
}

.BOUTTONSDIAPO{
    display: inline-block;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    background-color: aliceblue;
    margin: 0 4px;
    /* 添加点击反馈 */
    transition: background-color 0.3s;
}

/* 高亮当前激活的底部按钮 */
#slider-image-1:target ~ .BOUTTONSPLACE .BOUTTONSDIAPO:nth-child(1),
#slider-image-2:target ~ .BOUTTONSPLACE .BOUTTONSDIAPO:nth-child(2),
#slider-image-3:target ~ .BOUTTONSPLACE .BOUTTONSDIAPO:nth-child(3),
#slider-image-4:target ~ .BOUTTONSPLACE .BOUTTONSDIAPO:nth-child(4) {
    background-color: #ff6b6b;
}

#slider-image-1:target ~ .CONTENEURIMG{
    left: 0px;
}

#slider-image-2:target ~ .CONTENEURIMG{
    left: -1156px;
}

#slider-image-3:target ~ .CONTENEURIMG{
    left: -2312px;
}

#slider-image-4:target ~ .CONTENEURIMG{
    left: -3468px;
}

/* 左右箭头样式 */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    text-decoration: none;
    transition: background-color 0.3s;
    z-index: 10;
}

.slider-arrow:hover {
    background-color: rgba(0,0,0,0.8);
}

/* 箭头图标（用CSS实现，无需外部图片） */
.slider-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border-top: 3px solid white;
    border-left: 3px solid white;
}

.slider-arrow-prev {
    left: 20px;
}

.slider-arrow-prev::before {
    transform: translate(-60%, -50%) rotate(-45deg);
}

.slider-arrow-next {
    right: 20px;
}

.slider-arrow-next::before {
    transform: translate(-40%, -50%) rotate(135deg);
}

改动说明 #

1. 侧边切换箭头：
   • 在HTML中新增左右两个箭头按钮
   • CSS中通过绝对定位将箭头固定在幻灯片两侧，用纯CSS绘制箭头图标，添加hover效果增强交互感
2. 自动切换功能：
   • 新增JavaScript逻辑，实现10秒无操作自动切换到下一张幻灯片
   • 任何手动操作（点击箭头、底部按钮）都会重置自动切换定时器，避免干扰用户操作
3. 样式优化：
   • 给底部按钮添加当前幻灯片高亮效果，方便用户识别当前位置
   • 提升按钮和箭头的层级，避免被图片遮挡
   • 给交互元素添加过渡动画，让操作更流畅自然

内容的提问来源于stack exchange，提问作者Halilman 04