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

html+css+js图片手动轮播

news 2026/3/27 19:05:49

源代码在界面图片后面

轮播演示用的几张图片是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

保姆级教程：用串口和Telnet连接Hi3559/Hi3516开发板，5分钟搞定环境搭建

5分钟极速上手&#xff1a;Hi3559/Hi3516开发板串口与Telnet连接实战指南 刚拿到海思开发板时&#xff0c;许多开发者会被一堆陌生的接口和术语吓退。其实只要掌握几个关键步骤&#xff0c;从拆箱到建立稳定连接只需一根串口线和五分钟时间。本文将用最直白的语言&#xff0c;带…...

编程新知 2026/3/27 18:32:34

电气团队主导工业数据中心建设，哪些主流供应商覆盖接线端子、机柜布线与自动控制？——聚焦厂商类型划分、能力结构及边界界定

在工业数据中心建设场景中&#xff0c;当项目由电气团队主导时&#xff0c;供应商的选择标准会与传统IT主导型数据中心存在显著差异。“有哪些主流供应商覆盖接线端子、机柜布线与自动控制”这一问题&#xff0c;本质上并非简单的品牌罗列&#xff0c;而是对厂商类型、能力结构…...

编程新知 2026/3/27 17:23:56

Llama-3.2V-11B-cot部署教程：WSL2环境下双4090识别与分配验证

Llama-3.2V-11B-cot部署教程&#xff1a;WSL2环境下双4090识别与分配验证 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具。该工具针对双卡4090环境进行了深度优化&#xff0c;特别适合在WSL2环境下部署使用。通过本教程…...

编程新知 2026/3/27 16:43:31

5分钟搞定PaddleOCR文字识别：Python版保姆级教程（附完整代码）

5分钟极速上手PaddleOCR&#xff1a;Python实战指南与避坑手册 第一次接触OCR技术时&#xff0c;我被那些复杂的配置参数和晦涩的文档吓退了三次。直到发现PaddleOCR这个"开箱即用"的工具&#xff0c;才明白原来文字识别可以如此简单。本文将带你用最直接的方式&…...

编程新知 2026/3/27 16:41:30

APISIX Dashboard实战：从零配置JWT认证网关（含Node.js后端对接）

APISIX Dashboard实战&#xff1a;从零构建JWT认证网关与Node.js后端深度集成 引言&#xff1a;为什么选择APISIX作为API网关&#xff1f; 在现代微服务架构中&#xff0c;API网关扮演着流量调度和安全防护的双重角色。APISIX作为云原生API网关的佼佼者&#xff0c;凭借其动态…...

编程新知 2026/3/27 16:39:30

计算机毕业设计springboot校园文化社区视频网站 基于SpringBoot的校园文化交流短视频平台 SpringBoot框架下的高校文化分享与视频互动系统

计算机毕业设计springboot校园文化社区视频网站94nso9 &#xff08;配套有源码 程序 mysql数据库 论文&#xff09;本套源码可以先看具体功能演示视频领取&#xff0c;文末有联xi 可分享在"互联网校园"理念全面渗透的今天&#xff0c;视频已成为大学生记录生活、传播…...

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

OpCore-Simplify：智能化解构OpenCore EFI配置难题，让黑苹果安装不再复杂

OpCore-Simplify&#xff1a;智能化解构OpenCore EFI配置难题&#xff0c;让黑苹果安装不再复杂 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为…...

编程新知 2026/3/27 15:26:58

3步打造极速安全系统：AtlasOS开源优化方案全解析

3步打造极速安全系统&#xff1a;AtlasOS开源优化方案全解析 【免费下载链接】Atlas &#x1f680; An open and lightweight modification to Windows, designed to optimize performance, privacy and security. 项目地址: https://gitcode.com/GitHub_Trending/atlas1/Atl…...

编程新知 2026/3/27 15:24:56

告别“替身攻击”：手把手教你用零阶优化（ZOO）直接黑盒攻击DNN模型

零阶优化实战&#xff1a;无需替代模型的黑盒对抗攻击指南 当面对一个部署在云端的深度学习API时&#xff0c;传统白盒攻击手段往往束手无策——既无法获取模型架构&#xff0c;也不能执行反向传播。本文将揭示如何运用零阶优化技术&#xff0c;仅通过输入输出查询就能构造高效…...

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

Comsol流固耦合分析中的达西定律模块与固体力学模块的应用

Comsol流固耦合注浆及冒浆分析 采用其中达西定律模块及固体力学模块&#xff0c;通过建立质量源项、体荷载等实现上述考虑渗流场与结构场流固耦合理论方程的嵌入。在COMSOL里玩流固耦合就像给工程问题装了个动态CT扫描仪。最近在搞注浆冒浆模拟时发现&#xff0c;把达西渗流和固…...

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