整体功能概述

这段代码构建了一个简单的图片轮播组件，每 2 秒随机展示一张图片，并显示对应的标题和设置背景颜色。它包含 HTML 结构、CSS 样式和 JavaScript 交互逻辑。

代码结构与功能模块

1. HTML 结构
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="轮播图.css">
    <title>Document</title>
</head>

<body>
    <div class="slider">
        <div class="slider-wrapper">
            <img id="slider-img" src="https://picsum.photos/560/320?random=1">
        </div>
        <div class="slider-footer">
            <p></p>
            <ul class="slider-indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="toggle">
                <button class="prev">&lt;</button>
                <button class="next">&gt;</button>
            </div>
        </div>
    </div>

    <script>
        // JavaScript 代码部分
    </script>
</body>

</html>
  • 头部（<head>）：
    • 设置字符编码为 UTF - 8，确保页面能正确显示各种字符。
    • 设置视口，让页面在不同设备上有良好的显示效果。
    • 引入外部 CSS 文件 轮播图.css 来设置页面样式。
    • 设置页面标题为 Document。
  • 主体（<body>）：
    • 创建一个 div 元素，类名为 slider，作为轮播组件的容器。
    • 在 slider 内部，slider-wrapper 用于包裹图片，初始显示一张占位图片。
    • slider-footer 包含标题显示区域（<p> 标签）、指示器（<ul class="slider-indicator">）和切换按钮（<button class="prev"> 和 <button class="next">）。
2. CSS 样式
* {
    box-sizing: border-box;
}

.slider {
    width: 560px;
    height: 400px;
    overflow: hidden;
}

.slider-wrapper {
    width: 100%;
    height: 320px;
}

.slider-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-footer {
    height: 80px;
    background-color: rgb(100, 67, 68);
    padding: 12px 12px 0 12px;
    position: relative;
}

.slider-footer .toggle {
    position: absolute;
    right: 0;
    top: 12px;
    display: flex;
}

.slider-footer .toggle button {
    margin-right: 12px;
    width: 28px;
    height: 28px;
    appearance: none;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.slider-footer .toggle button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.slider-footer p {
    margin: 0;
    color: #fff;
    font-size: 18px;
    margin-bottom: 10px;
}

.slider-indicator {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.slider-indicator li {
    width: 8px;
    height: 8px;
    margin: 4px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.4;
    cursor: pointer;
}

.slider-indicator li.active {
    width: 12px;
    height: 12px;
    opacity: 1;
}
  • * { box-sizing: border-box; }：将所有元素的盒模型设置为 border-box，使元素的宽度和高度包含内边距和边框。
  • .slider：设置轮播组件的宽度和高度，并隐藏溢出内容。
  • .slider-wrapper：设置图片容器的宽度和高度。
  • .slider-wrapper img：设置图片宽度和高度为 100%，并使用 object-fit: cover 让图片填充容器且保持比例。
  • .slider-footer：设置底部区域的高度、背景颜色和内边距，并使用相对定位。
  • .slider-footer .toggle：设置切换按钮的位置为绝对定位，靠右显示。
  • .slider-footer .toggle button：设置切换按钮的样式，包括大小、背景颜色、边框等。
  • .slider-footer .toggle button:hover：设置按钮悬停时的背景颜色。
  • .slider-footer p：设置标题的字体颜色、大小和外边距。
  • .slider-indicator：设置指示器的样式，使用 display: flex 使其水平排列。
  • .slider-indicator li 和 .slider-indicator li.active：设置指示器的样式，包括大小、背景颜色和透明度。
  • 3. JavaScript 交互逻辑
  • const sliderDate = [
    { url: '图片/20230316160248349.jpg', title: '我爱吃朱肉', color: 'rgb(100,67,68)' },
    { url: '图片/20240823021121171.jpg', title: '我也爱吃朱肉', color: 'rgb(100,67,68)' },
    { url: '图片/20240413011830959.png', title: '你爱吃朱肉吗', color: 'rgb(100,67,68)' },
    { url: '图片/20250216163425547.jpg', title: '你也爱吃朱肉啊', color: 'rgb(100,67,68)' },
    { url: '图片/20250101190633241.jpg', title: '我讨厌吃朱肉', color: 'rgb(100,67,68)' },
    { url: '图片/20250323004805969.jpg', title: '你也讨厌吃朱肉吗', color: 'rgb(100,67,68)' },
    { url: '图片/emotion_download_1742914556640.jpg', title: 'adfdj', color: 'rgb(100,67,68)' },
    { url: '图片/20220705115622967.jpg', title: '我不讨厌', color: 'rgb(100,67,68)' }
];
const img = document.querySelector('.slider-wrapper img');
const p = document.querySelector('.slider-footer p');
const footer = document.querySelector('.slider-footer');

function updateSlider() {
    const random = parseInt(Math.random() * sliderDate.length);
    img.src = sliderDate[random].url;
    p.innerHTML = sliderDate[random].title;
    footer.style.backgroundColor = sliderDate[random].color;
}

// 初始加载时更新一次
updateSlider();

// 每 2 秒自动刷新一次
setInterval(updateSlider, 2000);

  • sliderDate：一个数组，包含多个对象，每个对象表示一张图片的信息，包括图片地址、标题和背景颜色。
  • img、p 和 footer：通过 document.querySelector 方法获取图片元素、标题元素和底部区域元素。
  • updateSlider 函数：
    • 生成一个随机索引，用于从 sliderDate 数组中随机选择一张图片。
    • 更新图片的 src 属性、标题元素的内容和底部区域的背景颜色。
  • updateSlider()：页面加载时调用一次，显示初始图片。
  • setInterval(updateSlider, 2000)：每 2 秒调用一次 updateSlider 函数，实现图片的自动轮播。

  • 总结

    这段代码通过 HTML、CSS 和 JavaScript 实现了一个简单的图片轮播效果，虽然功能相对基础，但可以作为学习和扩展的起点。你可以根据实际需求对代码进行改进和优化，添加更多的交互功能和样式。

  • 效果展示

 想看整个网站的源代码可联系，没有网盘。

# 前端
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

替你试过了，消费级显卡可以跑的开源文生图SOTA模型，顶级渲染、高密度文本绘图

avatar 魔乐社区
cover

量化挑战赛冠军专访：4小时啃下W4A8量化，我靠的是这些经验

avatar 魔乐社区

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模

avatar 魔乐社区