《实现 HTML 图片轮播效果》

目录

[(一)HTML 结构](#(一)HTML 结构)

[(二)CSS 样式](#(二)CSS 样式)

[(三)JavaScript 实现轮播逻辑](#(三)JavaScript 实现轮播逻辑)


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

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

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

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

(一)HTML 结构

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 样式

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 实现轮播逻辑

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 可以实现丰富的网页交互效果。

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试