HTMLCSS实现轮播图效果

news2025/4/21 20:31:10

这段代码实现了一个具有自动轮播、手动切换功能的图片轮播图，并且配有指示器（小圆点）来显示当前图片位置。轮播图可通过左右箭头按钮进行手动切换，也能自动定时切换，当鼠标悬停在轮播图上时，自动轮播会暂停，鼠标移开后继续。

代码详细分析

1. HTML 部分

<div class="box">
    <div class="wipper">
        <div><img src="../png/NTE_features1.jpg" alt="都市特色1" /></div>
        <div><img src="../png/NTE_features2.jpg" alt="都市特色2" /></div>
        <div><img src="../png/NTE_features3.jpg" alt="都市特色3" /></div>
        <div><img src="../png/NTE_features4.jpg" alt="都市特色4" /></div>
        <div><img src="../png/NTE_features5.jpg" alt="都市特色5" /></div>
        <div><img src="../png/NTE_features6.jpg" alt="都市特色6" /></div>
        <div><img src="../png/NTE_features1.jpg" alt="都市特色1" /></div>
    </div>
</div>
<div class="pre"></div>
<div class="next"></div>
<div class="lis">
    <span class="current"></span>
    <span class="current"></span>
    <span class="current"></span>
    <span class="current"></span>
    <span class="current"></span>
    <span class="current"></span>
</div>

.box 容器：作为轮播图的整体容器，用于包裹图片和控制溢出内容。
.wipper 容器：用来包含所有图片，通过改变其 transform 属性实现图片的滚动。
图片元素：每个 <div> 中包含一张图片，为了实现无缝循环，最后一张图片重复第一张。
.pre 和 .next 按钮：分别作为上一张和下一张的切换按钮。
.lis 指示器：包含多个 <span> 元素，用于指示当前显示的图片位置。

2. CSS 部分

.box {
    width: 1120px;
    height: 530px;
    margin: 0px auto;
    margin-top: -60px;
    overflow: hidden;
    position: relative;
    border: 9px solid #585858;
}

.wipper {
    width: 8400px;
    height: 530px;
    position: absolute;
    left: 0;
}

.wipper div {
    width: 1200px;
    height: 650px;
    float: left;
    text-align: center;
}

.wipper div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lis {
    text-align: center;
    border-radius: 5px;
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
}

.lis span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 5px;
    cursor: pointer;
}

.lis span.current {
    background-color: #e8e8e8;
}

.box 样式：设置轮播图容器的宽度、高度、边距、溢出处理和边框样式。
.wipper 样式：设置图片容器的宽度和高度，并将其定位为绝对定位，方便移动。
.wipper div 样式：设置每个图片容器的宽度、高度和浮动方式，使其水平排列。
.wipper div img 样式：设置图片的宽度、高度和填充方式，确保图片填满容器。
.lis 样式：设置指示器的位置和样式。
.lis span 样式：设置每个指示器小圆点的样式，包括大小、颜色和鼠标指针样式。
.lis span.current 样式：设置当前激活的指示器小圆点的样式。

3. JavaScript 部分

// 获取元素
var box = document.getElementsByClassName("box")[0];
var wipper = document.getElementsByClassName("wipper")[0];
var divs = wipper.getElementsByTagName("div");
var pre = document.getElementsByClassName("pre")[0];
var next = document.getElementsByClassName("next")[0];
var lis = document.getElementsByClassName("lis")[0];
var spans = lis.getElementsByTagName("span");

// 定义一个 index 保存当前图片索引
var index = 0;

// 下一张按钮点击事件
function nextClick() {
    index++;
    wipper.style.transition = "all .5s";
    wipper.style.transform = "translateX(" + -index * divs[0].offsetWidth + "px)";
    if (index == divs.length - 1) {
        index = 0;
        setTimeout(() => {
            wipper.style.transform = "translate(0,0)";
            wipper.style.transition = "none";
        }, 300);
    }
    for (var i = 0; i < spans.length; i++) {
        spans[i].className = "";
        spans[index].className = "current";
    }
}
next.onclick = nextClick;

// 上一张
function preClick() {
    index--;
    if (index == -1) {
        wipper.style.transform = "translateX(" + -5 * divs[0].offsetWidth + "px)";
        wipper.style.transition = "none";
        index = 4;
        setTimeout(() => {
            wipper.style.transform = "translateX(" + -index * divs[0].offsetWidth + "px)";
            wipper.style.transition = "all .5s";
        }, 0);
    } else {
        wipper.style.transform = "translateX(" + -index * divs[0].offsetWidth + "px)";
        wipper.style.transition = "all .5s";
    }
    for (var i = 0; i < spans.length; i++) {
        spans[i].className = "";
        spans[index].className = "current";
    }
}
pre.onclick = preClick;

// 自动轮播
var timer = setInterval(nextClick, 3000);

// 小圆点的点击事件
for (var i = 0; i < spans.length; i++) {
    (function (i) {
        spans[i].onclick = function () {
            var allSpans = this.parentNode.children;
            for (var j = 0; j < allSpans.length; j++) {
                allSpans[j].className = "";
            }
            this.className = "current";
            index = i;
            wipper.style.transform = "translateX(" + -index * divs[0].offsetWidth + "px)";
            wipper.style.transition = "all .5s";
        };
    })(i);
}

// 移入 box，清除定时器
box.onmouseenter = function () {
    clearInterval(timer);
};
// 移出 box，重新调用定时器
box.onmouseleave = function () {
    timer = setInterval(nextClick, 3000);
};

获取元素：通过 document.getElementsByClassName 和 document.getElementsByTagName 方法获取所需的 HTML 元素。
定义 index 变量：用于保存当前显示的图片索引。
nextClick 函数：处理下一张按钮的点击事件，增加 index 值，通过改变 wipper 的 transform 属性实现图片切换。当到达最后一张图片时，使用 setTimeout 函数实现无缝循环。同时更新指示器的样式。
preClick 函数：处理上一张按钮的点击事件，减少 index 值，处理到达第一张图片的情况，同样更新指示器的样式。
自动轮播：使用 setInterval 函数定时调用 nextClick 函数，实现自动轮播。
小圆点点击事件：为每个指示器小圆点添加点击事件，点击时更新 index 值和指示器样式，并切换到相应的图片。
鼠标悬停处理：当鼠标移入轮播图时，清除定时器，暂停自动轮播；鼠标移出时，重新启动定时器。