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

相关推荐
我要洋人死29 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人40 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人41 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#