《实现 HTML 图片轮播效果》

目录

（一）HTML 结构

（二）CSS 样式

（三）JavaScript 实现轮播逻辑

一、轮播效果的重要性与应用场景

在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。

二、HTML 轮播效果的实现分析

以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。

（一）HTML 结构

<div class="container">
    <ul class="img_box">
        <li><img src="img/20210714013959_50691.jpg" alt=""></li>
        <li><img src="img/20210218182831_891c5.jpg" alt=""></li>
        <li><img src="img/20210201171230_53725.jpg" alt=""></li>
    </ul>
</div>

在 HTML 部分，我们创建了一个包含图片列表的容器，这是轮播图的基本结构。

（二）CSS 样式

* {
    padding: 0;
    margin: 0;
}
img {
    width: 100px;
}
.container {
    width: 800px;
    height: 350px;
    background: red;
    margin: 100px auto;
    overflow: hidden;
    position: relative;
}
.container.btns {
    position: absolute;
    width: 90%;
    left: 5%;
    top: 150px;
    display: flex;
    justify-content: space - between;
}
.container.btns li {
    list - style: none;
    width: 50px;
    height: 50px;
    border - radius: 25px;
    text - align: center;
    line - height: 50px;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    color: white;
}
.container.btns li:hover {
    background: rgba(0, 0, 0, 0.4);
}
.container.img_box {
    width: 4000px;
    height: 350px;
    background: pink;
    display: flex;
    position: absolute;
    left: - 800px;
    /* transition: left 1s linear; */
}
.container.img_box li {
    width: 800px;
    height: 350px;
    list - style: none;
}
.container.img_box li img {
    width: 100%;
    height: 100%;
    object - fit: contain;
}
.dotts {
    position: absolute;
    /* background: red; */
    width: 100%;
    bottom: 10px;
    display: flex;
    justify - content: center;
}
.dotts li {
    list - style: none;
    background: rgba(255, 255, 255, 0.4);
    margin: 5px;
    padding: 4px 6px;
    font - size: 12px;
    cursor: pointer;
    border: 2px dashed rgb(239, 19, 169);
    border - radius: 60px;
}
.dotts li.current {
    color: white;
    background: black;
}

CSS 样式主要用于定义轮播图的外观，包括容器的大小、图片的尺寸、切换按钮和指示点的样式等。通过设置overflow: hidden来隐藏超出容器范围的图片，从而实现轮播效果。

（三）JavaScript 实现轮播逻辑

window.onload = function () {
    // 获取轮播容器 container
    var container = document.querySelector(".container");

    var img_box = document.querySelector(".container.img_box");
    img_box.style.left = "-800px";
    // 轮播核心代码
    var change = function (offset) {
        // 获取图片切换的目标位置
        var newoffset = parseInt(img_box.style.left) + offset;
        var speed = offset / 100;

        var move = function () {
            img_box.style.left = parseInt(img_box.style.left) + speed + "px";
            if (parseInt(img_box.style.left)!= newoffset) {
                setTimeout(move, 10);
            } else {
                if (parseInt(img_box.style.left) == -3200) {
                    img_box.style.left = "-800px";
                } else if (parseInt(img_box.style.left) == 0) {
                    img_box.style.left = "-2400px";
                }
            }
        };
        move();
    };


    // 生成左右切换的按钮
    var ul = document.createElement("ul");
    ul.className = "btns";
    var left_li = document.createElement("li");
    left_li.innerHTML = "<";
    var right_li = document.createElement("li");
    right_li.innerHTML = ">";
    ul.appendChild(left_li);
    ul.appendChild(right_li);
    container.appendChild(ul);

    // 绑定事件
    left_li.onclick = function () {
        change(800);
        index--;
        if (index < 0) {
            index = 2;
        }
        highlight();
    };
    right_li.onclick = function () {
        change(-800);
        index++;
        if (index > 2) {
            index = 0;
        }
        highlight();
    };


    // 自动轮播
    var timer = setInterval(right_li.onclick, 4000);
    // 解决冲突问题
    container.onmouseenter = function () {
        clearInterval(timer);
    };
    container.onmouseleave = function () {
        timer = setInterval(right_li.onclick, 4000);
    };


    // 生成任意切换的按钮
    var dott_ul = document.createElement("ul");
    dott_ul.className = "dotts";

    // 获取有几个图片
    var img_box_li = document.querySelectorAll(".img_box li");
    for (var i = 0; i < img_box_li.length; i++) {
        var li = document.createElement("li");
        li.innerHTML = i + 1;
        if (i == 0) {
            li.className = "current";
        }
        dott_ul.append(li);
    }
    container.append(dott_ul);


    // 任意切换
    var dott_ul_li = document.querySelectorAll(".dotts li");
    for (var i = 0; i < dott_ul_li.length; i++) {
        dott_ul_li[i].onclick = function () {
            // 图片切换
            var new_index = this.innerText - 1;
            change((index - new_index) * 800);

            // 效果切换
            index = new_index;
            highlight();
        };
    }
    // 定义一个游标 记录当前点点的索引值
    var index = 0;
    // 按钮样式切换代码
    var highlight = function () {
        for (var k = 0; k < dott_ul_li.length; k++) {
            if (k == index) {
                dott_ul_li[k].className = "current";
            } else {
                dott_ul_li[k].className = "";
            }
        }
    };


    // 初始化辅助无缝轮播的图片
    var last_li = img_box.firstElementChild.cloneNode(true);
    var first_li = img_box.lastElementChild.cloneNode(true);

    img_box.insertBefore(first_li, img_box.firstElementChild);
    img_box.appendChild(last_li);
};

JavaScript 代码实现了轮播的核心逻辑，包括左右按钮点击切换图片、自动轮播、鼠标移入移出暂停和恢复自动轮播、点击指示点切换图片以及样式切换等功能。其中，通过改变图片容器的left值来实现图片的切换，并且利用克隆第一张和最后一张图片实现无缝轮播的效果。

通过这个 HTML 图片轮播的例子，我们可以看到，结合 HTML、CSS 和 JavaScript 可以实现丰富的网页交互效果。