当前位置： 首页 > news >正文

html+css+js图片手动轮播

news 2026/3/27 20:34:22

源代码在界面图片后面

轮播演示用的几张图片是Bing上的，直接用的几张图片的URL，谁加载可能需要等一下，现实中替换成自己的图片即可 

关注一下点个赞吧😄  谢谢大佬

界面图片

bb8b1067ffc440e690b2ac4ed516f4a3.jpg

 源代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播示例</title>
<style>
body {
    background-color: #f0f0f0; /* 浅灰色背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.carousel-container {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 20px;
    text-align: center;
    width: 80%; /* 居中的白色板块 */
    max-width: 600px;
}

.carousel-image {
    max-width: 100%;
    height: auto;
}

.carousel-control {
    background-color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    font-size: 24px;
    padding: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

.carousel-control:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.left-control {
    left: 10px;
}

.right-control {
    right: 10px;
}
</style>
</head>
<body>
<div class="carousel-container">
    <button class="carousel-control left-control" οnclick="changeImage(-1)">&lt;</button>
    <img id="carousel-image" class="carousel-image" src="" alt="轮播图片">
    <button class="carousel-control right-control" οnclick="changeImage(1)">&gt;</button>
</div>

<script>
const images = [
    "https://ts1.cn.mm.bing.net/th/id/R-C.9de53f9726576696b318a8d95c0946cb?rik=sWB3V9KSxHbThw&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f95%2f9995_1.jpg&ehk=GcPUjJED69TBvg9XxQr2klzDzfRsQWhAfLKlIAUWHJQ%3d&risl=&pid=ImgRaw&r=0",
    "https://ts1.cn.mm.bing.net/th/id/R-C.bce643843f297a348a620b02dec5dd6c?rik=vGMu1xOGEt5sZQ&riu=http%3a%2f%2fimg-download.pchome.net%2fdownload%2f1k0%2fxd%2f2i%2fodbf7c-1xnq.jpg&ehk=fzIKhJf9OjdHZZd6RheQwC1fUk6Pq9AkQfOTIiyR%2bGk%3d&risl=&pid=ImgRaw&r=0",
    "https://ts1.cn.mm.bing.net/th/id/R-C.0f21d191aff30c561c6d0c0bddecff14?rik=1pG9zUd9j2RVBw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303214937.jpg&ehk=3XfxBPble42NXL5kK6D7JWDBMU%2froqqu3uMXT9NGC5s%3d&risl=&pid=ImgRaw&r=0"
];

let currentIndex = 1; // 开始显示第二张图片

document.getElementById('carousel-image').src = images[currentIndex];

function changeImage(direction) {
    currentIndex += direction;

    if (currentIndex >= images.length) {
        alert("这是最后一张图片！");
        currentIndex = images.length - 1;
    } else if (currentIndex < 0) {
        alert("这是第一张图片！");
        currentIndex = 0;
    }

    document.getElementById('carousel-image').src = images[currentIndex];
}
</script>
</body>
</html>

相关文章：

html+css+js图片手动轮播

源代码在界面图片后面 轮播演示用的几张图片是Bing上的&#xff0c;直接用的几张图片的URL&#xff0c;谁加载可能需要等一下&#xff0c;现实中替换成自己的图片即可 关注一下点个赞吧&#x1f604; 谢谢大佬 界面图片 源代码 <!DOCTYPE html> <html lang&quo…...

编程日记 2024/7/6 23:33:22

【十三】图解 Spring 核心数据结构：BeanDefinition 其二

图解 Spring 核心数据结构&#xff1a;BeanDefinition 其二 概述 前面写过一篇相关文章作为开篇介绍了一下BeanDefinition&#xff0c;本篇将深入细节来向读者展示BeanDefinition的设计&#xff0c;让我们一起来揭开日常开发中使用的bean的神秘面纱&#xff0c;深入细节透彻理解…...

编程日记 2024/7/6 23:32:21

数据库作业

命令 登陆数据库 mysql -uroot -p123456 --prompt"\u\h:\d--> " 创建数据库zcr create database zcr&#xff1b; 修改数据库zcr字符集为gbk alter database zcr default character set gbk collate gbk_chinese_ci; 选择数据库zcr use zcr 查看数据库zc…...

编程日记 2024/7/6 23:30:19

12、matlab中for循环，if else判断语句，break和continue用法以及switch case语句使用

1、前言 在MATLAB中&#xff0c;for循环用于迭代一个固定次数的循环。可以使用if else语句在循环中进行条件判断&#xff0c;根据条件的不同执行相应的代码块。break和continue可以用于控制循环的执行流程&#xff0c;break用于提前结束循环&#xff0c;而continue用于跳过当前…...

编程日记 2024/7/6 23:29:17

AcWing 3207：门禁系统 ← 桶排序中“桶”的思想

【题目来源】https://www.acwing.com/problem/content/3210/【题目描述】 涛涛最近要负责图书馆的管理工作&#xff0c;需要记录下每天读者的到访情况。 每位读者有一个唯一编号&#xff0c;每条记录用读者的编号来表示。 给出读者的来访记录&#xff0c;请问每一条记录中的读者…...

编程日记 2024/7/6 23:28:17

开发个人Go-ChatGPT--3 服务拆分

开发个人Go-ChatGPT–3 服务拆分 个人Go-ChatGPT项目可拆分用户服务&#xff08;user&#xff09;&#xff0c;AI模型服务&#xff08;AiModel&#xff09;&#xff0c;… 每个服务都可以再分为 api 服务和 rpc 服务。api 服务对外&#xff0c;可提供给 app 调用。rpc 服务是…...

编程日记 2024/7/6 23:25:14

Android --- 新电脑安装Android Studio 使用 Android 内置模拟器电脑直接卡死，鼠标和键盘都操作不了

新电脑安装Android Studio 使用 Android 内置模拟器电脑直接卡死&#xff0c;鼠标和键盘都操作不了 大概原因就是,初始化默认Google的安卓模拟器占用的RAM内存是2048&#xff0c;如果电脑的性能和内存一般的话就可能卡死&#xff0c;解决方案是手动修改安卓模拟器的config文件&…...

编程日记 2024/7/6 23:24:13

从入门到深入，Docker新手学习教程

编译整理&#xff5c;TesterHome社区 作者&#xff5c;Ishaan Gupta 以下为作者观点&#xff1a; Docker 彻底改变了我们开发、交付和运行应用程序的方式。它使开发人员能够将应用程序打包到容器中 - 标准化的可执行组件&#xff0c;将应用程序源代码与在任何环境中运行该代码…...

编程日记 2024/7/6 23:23:12

Postman编写测试脚本

在 Postman 中&#xff0c;编写测试脚本通常使用 JavaScript&#xff0c;这些脚本可以在请求发送前后执行。以下是一些示例代码&#xff0c;展示了如何在 Postman 中使用测试脚本。 1. 测试脚本示例&#xff1a;检查响应状态码 // 测试脚本在请求发送后执行 pm.test("Re…...

编程日记 2024/7/6 23:22:11

代码随想录算法训练Day57|LeetCode200-岛屿数量、LeetCode695-岛屿的最大面积

岛屿数量 题目描述 力扣200-岛屿数量 给你一个由 1&#xff08;陆地&#xff09;和 0&#xff08;水&#xff09;组成的的二维网格&#xff0c;请你计算网格中岛屿的数量。 岛屿总是被水包围&#xff0c;并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成。 此…...

编程日记 2024/7/6 23:19:09

StopWatch的使用

org.springframework.util.StopWatch 是 Spring 框架提供的一个轻量级的计时工具&#xff0c;用于测量代码执行时间。它比 Apache Commons Lang 的 StopWatch 提供了更多的功能&#xff0c;例如累计多个时间段、打印详细报告等。 以下是如何使用 Spring 的 StopWatch&#xff…...

编程日记 2024/7/6 23:16:05

MySQL基础篇（三）数据库的修改 删除 备份恢复 查看连接情况

对数据库的修改主要指的是修改数据库的字符集&#xff0c;校验规则。 将test1数据库字符集改为gbk。 数据库的删除&#xff1a; 执行完该数据库就不存在了&#xff0c;对应数据库文件夹被删除&#xff0c;级联删除&#xff0c;里面的数据表全部被删除。 注意&#xff1a;不要随…...

编程日记 2024/7/6 23:13:03

android手机电视相框项目-学员做出个bug版本邀请大家review提意见

背景 前几天给我的vip学员布置了一个android手机/电视相框的项目&#xff0c;具体详情看如下链接&#xff1a; https://mp.weixin.qq.com/s/l2roDoco-o59SLlORENZlA 这个项目我说过不给提供答案哈&#xff0c;让各位学员朋友自己独立思考完成哈&#xff0c;因为尽量想让大家慢…...

编程日记 2024/7/6 23:12:02

web零碎知识2

不知道我的这个axios的包导进去没。 找一下关键词&#xff1a; http请求协议&#xff1a;就是进行交互式的格式 需要定义好 这个式一发一收短连接 而且没有记忆 这个分为三个部分 第一个式请求行&#xff0c;第二个就是请求头 第三个就是请求体 以get方式进行请求的失手请求…...

编程日记 2024/7/6 23:10:00

Android项目框架

Android项目基于Android Studio开发&#xff0c;Android Studio使用Gradle作为项目构建工具。新建工程后可以看到如图所示目录结构&#xff0c;将Android切成Project可以看到完整的Android工程目录结构&#xff0c;如图所示。 图1-2 Android项目目录结构 app目录是一个典型的…...

编程日记 2024/7/6 23:05:56

vue 模糊查询加个禁止属性

vue 模糊查询加个禁止属性 父组件通过属性传&#xff0c;是否禁止输入-------默认可以输入...

编程日记 2024/7/6 23:04:55

MySQL 主从复制中 MHA 工具的研究与实践

MySQL 主从复制中 MHA 工具的研究与实践 一、MHA 工具简介二、MHA 的工作原理三、MHA 配置步骤环境准备1. 在主服务器上配置主从复制2. 在从服务器上配置复制 安装 MHA 工具1. 安装必要的依赖包2. 下载并安装 MHA 配置 MHA1. 创建 MHA 配置文件2. 配置 SSH 免密登录 测试 MHA1.…...

编程日记 2024/7/6 23:03:54

Hi3861 OpenHarmony嵌入式应用入门--TCP Server

本篇使用的是lwip编写tcp服务端。需要提前准备好一个PARAM_HOTSPOT_SSID宏定义的热点&#xff0c;并且密码为PARAM_HOTSPOT_PSK LwIP简介 LwIP是什么&#xff1f; A Lightweight TCP/IP stack 一个轻量级的TCP/IP协议栈 详细介绍请参考LwIP项目官网&#xff1a;lwIP - A Li…...

编程日记 2024/7/6 23:02:53

Poker Game, Run Fast

Poker Game, Run Fast 扑克&#xff1a;跑得快 分门别类&#xff1a; 单张从小到大默认 A < 2 < 3 < 4 < 5 < 6 < 7 < 8 < 9 < 10 < J < Q < K 跑得快&#xff1a;单张从小到大 3 < 4 < 5 < 6 < 7 < 8 < 9 < 10 &…...

编程日记 2024/7/6 23:01:52

订单折扣金额分摊算法|代金券分摊|收银系统|积分分摊|分摊|精度问题|按比例分配|钱分摊|钱分配

一个金额分摊的算法&#xff0c;将折扣分摊按比例&#xff08;细单实收在总体的占比&#xff09;到各个细单中。 此算法需要达到以下要求&#xff1a; 折扣金额接近细单总额&#xff0c;甚至折扣金额等于细单金额&#xff0c;某些时候甚至超过细单总额&#xff0c;要保证实收不…...

编程日记 2024/7/6 23:00:50

通用多模态检索——大模型微调

1、7B的模型&#xff0c;参数量就占到了16G&#xff0c;而且你要检索&#xff0c;要把所有的候选项candidate全部变成向量嵌入&#xff0c;然后计算相似度&#xff0c;3090的24G显存很容易爆&#xff0c;而且数据量一旦大了一点&#xff0c;达到几万&#xff0c;基本就很难跑通…...

编程新知 2026/3/27 19:40:59

Python子解释器隔离全解密（从PyThreadState到_PyInterpreterState）：20年源码级剖析，首次公开CPython内部隔离边界图谱

第一章&#xff1a;Python子解释器隔离的演进脉络与核心挑战Python长期以来依赖全局解释器锁&#xff08;GIL&#xff09;保障线程安全&#xff0c;但这也限制了真正的并行执行能力。为突破这一瓶颈&#xff0c;CPython自3.12起正式引入子解释器&#xff08;subinterpreters&am…...

编程新知 2026/3/27 18:58:48

百川2-13B模型安全测试：OpenClaw在防御恶意指令方面的表现

百川2-13B模型安全测试&#xff1a;OpenClaw在防御恶意指令方面的表现 1. 为什么需要测试AI助手的安全性 去年我在本地部署了一个自动化助手&#xff0c;本想让它帮我整理文档和收发邮件。结果有次不小心让它执行了一个包含rm -rf的命令&#xff0c;差点把工作目录清空。这次…...

编程新知 2026/3/27 18:16:14

麦橘超然Flux效果展示：多风格AI绘画作品集锦

麦橘超然Flux效果展示&#xff1a;多风格AI绘画作品集锦 1. 惊艳开篇&#xff1a;当AI画笔遇见专业级表现 在数字艺术创作领域&#xff0c;我们常常面临一个两难选择&#xff1a;要么使用云端AI服务但受限于网络和隐私&#xff0c;要么部署本地工具却要忍受复杂的配置和显存焦…...

编程新知 2026/3/27 18:04:06

别再只看灰度图了！用功率谱给你的AI生成图像质量把把脉

功率谱分析&#xff1a;AI生成图像质量评估的隐藏利器 当我们在评估AI生成的图像时&#xff0c;常常会陷入主观判断的陷阱——肉眼观察虽然直观&#xff0c;但缺乏量化标准。而功率谱分析这一源自信号处理的技术&#xff0c;正悄然成为AI图像质量评估领域的一把精准尺子。不同于…...

编程新知 2026/3/27 17:09:49

【Python多解释器隔离终极指南】：20年CTO亲授GIL绕过术、内存隔离与并发安全实战（附可运行代码库）

第一章&#xff1a;Python多解释器隔离的核心概念与演进脉络Python长期以来以全局解释器锁&#xff08;GIL&#xff09;为标志性设计&#xff0c;单进程内仅能存在一个活跃的CPython解释器状态&#xff08;PyInterpreterState&#xff09;&#xff0c;这使得“多解释器”长期处…...

编程新知 2026/3/27 16:49:32

Python 装饰器实战：用@syntax 优雅地增强函数功能

# Python 装饰器实战&#xff1a;用syntax 优雅地增强函数功能## 什么是装饰器&#xff1f;装饰器&#xff08;Decorator&#xff09;是 Python 中的一种高级特性&#xff0c;它允许你在不修改原函数代码的情况下&#xff0c;动态地给函数添加功能。简单来说&#xff0c;装饰器…...

编程新知 2026/3/27 16:13:20

蓝牙5.1室内定位精度提升秘籍：iBeacon+AoA技术实战指南

蓝牙5.1室内定位精度提升秘籍&#xff1a;iBeaconAoA技术实战指南 在仓储物流和医疗设备管理等对定位精度要求严苛的场景中&#xff0c;传统蓝牙RSSI定位技术常因多径效应和信号衰减导致2-5米的误差。而蓝牙5.1引入的AoA&#xff08;到达角&#xff09;技术&#xff0c;配合iBe…...

编程新知 2026/3/27 15:53:11

EVE舰船配置神器Pyfa全攻略：从新手到专家的实战指南

EVE舰船配置神器Pyfa全攻略&#xff1a;从新手到专家的实战指南 【免费下载链接】Pyfa Python fitting assistant, cross-platform fitting tool for EVE Online 项目地址: https://gitcode.com/gh_mirrors/py/Pyfa 在EVE Online的浩瀚宇宙中&#xff0c;每一位舰长都需…...

编程新知 2026/3/27 15:06:51

如何用QuickRecorder解决macOS录屏痛点：高效专业的从入门到精通实践指南

如何用QuickRecorder解决macOS录屏痛点&#xff1a;高效专业的从入门到精通实践指南 【免费下载链接】QuickRecorder A lightweight screen recorder based on ScreenCapture Kit for macOS / 基于 ScreenCapture Kit 的轻量化多功能 macOS 录屏工具 项目地址: https://gitco…...

编程新知 2026/3/27 14:32:29