下面介绍一种不依赖第三方库的图片轮播实现方案，具备自动播放、悬停暂停、手动切换和指示器导航等完整功能。

核心功能特性

• 每5秒自动切换图片，鼠标进入时暂停播放
• 左右两侧悬浮箭头按钮，鼠标悬停时显现，支持手动翻页
• 底部圆点指示器，点击可跳转到指定图片

HTML结构

<div class="slider-wrapper">
    <img class="slide-image" src="img/t1.png" alt="轮播图">
    
    <span class="nav-prev">&lt;</span>
    <span class="nav-next">&gt;</span>
    
    <div class="dot-container">
        <span class="dot active"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>
</div>

样式设计

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.slider-wrapper {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.slide-image {
    width: 100%;
    display: block;
}

.nav-prev, .nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s;
}

.nav-prev { left: 0; }
.nav-next { right: 0; }

.slider-wrapper:hover .nav-prev,
.slider-wrapper:hover .nav-next {
    opacity: 1;
}

.dot-container {
    position: absolute;
    bottom: 30px;
    right: 40px;
    display: flex;
    gap: 12px;
}

.dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #333;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

.dot.active {
    border-color: #fff;
    background: rgba(0, 0, 0, 0.8);
}

交互逻辑

const wrapper = document.querySelector('.slider-wrapper');
const imgEl = document.querySelector('.slide-image');
const dots = document.querySelectorAll('.dot');
const prevBtn = document.querySelector('.nav-prev');
const nextBtn = document.querySelector('.nav-next');

const totalSlides = 5;
let currentPos = 1;
let timer = null;

function updateDisplay() {
    imgEl.src = `img/t${currentPos}.png`;
    
    dots.forEach((dot, idx) => {
        dot.classList.toggle('active', idx === currentPos - 1);
    });
}

function moveForward() {
    currentPos = currentPos >= totalSlides ? 1 : currentPos + 1;
    updateDisplay();
}

function moveBackward() {
    currentPos = currentPos <= 1 ? totalSlides : currentPos - 1;
    updateDisplay();
}

function activate() {
    timer = setInterval(moveForward, 5000);
}

function deactivate() {
    clearInterval(timer);
}

wrapper.addEventListener('mouseenter', deactivate);
wrapper.addEventListener('mouseleave', activate);

prevBtn.addEventListener('click', () => {
    moveBackward();
    deactivate();
});

nextBtn.addEventListener('click', () => {
    moveForward();
    deactivate();
});

dots.forEach((dot, idx) => {
    dot.addEventListener('click', () => {
        currentPos = idx + 1;
        updateDisplay();
        deactivate();
    });
});

activate();

关键实现要点

采用事件委托思想，将鼠标事件绑定在外层容器上统一管理。通过classList.toggle简化样式切换逻辑，使用箭头函数保持代码简洁。计时器控制采用启动/停止分离设计，便于在各种交互场景下灵活调用。

图片命名采用t1.png到t5.png的连续编号，与索引变量形成映射关系。边界处理使用三元运算符实现循环轮播，避免条件分支嵌套。