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

JavaScript图片轮播

news 2026/2/10 20:12:02

代码在文章最后面（含图片URL）

实现功能

  1. 按向左按钮图片显示上一张
  2. 按向右按钮图片显示下一张
  3. 每隔2000毫秒显示下一张图
  4. 底部三个圆点显示当前的图片的编号

实现流程

  1. 初始化图片数组 创建一个包含图片URL的数组，轮播时会通过这个数组来切换图片。
  2. 创建当前索引变量 这个变量用来追踪当前显示的图片索引。
  3. 创建自动轮播图片函数 该函数负责更改轮播图中显示的图片，并根据当前索引更新指示器的状态。
  4. 创建指示器的函数 此函数在HTML中创建了与图片数量相同的指示器元素，并为第一个指示器添加了active-indicator类，以表示它是活动的。
  5. 下一张图片按钮 当用户点击“下一张”按钮时，这个函数会被触发。它将currentIndex加一，如果索引等于图片数组长度，则将索引重置为0，然后调用showImage函数来更新图片和指示器。
  6. 上一张图片按钮 当用户点击“上一张”按钮时，这个函数会被触发。它将currentIndex减一，如果索引小于0，则将索引设置为图片数组的最后一个元素的索引，然后调用showImage函数来更新图片和指示器。
  7. 创建事件监听器 将这些监听器绑定到“下一张”和“上一张”按钮上，当按钮被点击时，它们会调用相应的函数。
  8. 启动自动轮播 设置了一个定时器，每隔2000毫秒（2秒）调用一次nextImage函数，从而实现图片的自动轮播。

ONGD：通过操作DOM元素，用CSS类来控制显示的图片和当前图片指示器的状态，实现了图片轮播。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Carousel</title>
<style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;}.carousel {position: relative;width: 300px;height: 200px;border-radius: 8px;overflow: hidden;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}.carousel img {width: 100%;height: auto;}.controls {position: absolute;top: 50%;transform: translateY(-50%);width: 100%;display: flex;justify-content: space-between;padding: 0 10px;}.control-button {background-color: white;color: #333;font-size: 20px;width: 30px;height: 30px;border-radius: 50%;display: flex;justify-content: center;align-items: center;cursor: pointer;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}.indicator-container {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;}.indicator {background-color: #ccc;width: 10px;height: 10px;border-radius: 50%;margin: 0 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}.active-indicator {background-color: black;}
</style>
</head>
<body>
<div class="carousel"><img src="" alt="Image" id="carousel-image"><div class="controls"><button class="control-button" id="prev-btn">👈</button><button class="control-button" id="next-btn">👉</button></div><div class="indicator-container" id="indicators"></div>
</div><script>const images = ['https://q9.itc.cn/q_70/images03/20240715/8319afaf350346a08a4d51b65638e39d.png','https://n.sinaimg.cn/sinacn20191106ac/42/w500h342/20191106/6b91-ihyxcrp9562392.jpg','https://n.sinaimg.cn/news/transform/20170412/D-Ac-fyecfam0465124.jpg'];let currentIndex = 0;function showImage(index) {document.getElementById('carousel-image').src = images[index];const indicators = document.getElementById('indicators').children;for (let i = 0; i < indicators.length; i++) {indicators[i].classList.remove('active-indicator');}indicators[index].classList.add('active-indicator');}function createIndicators() {const indicatorContainer = document.getElementById('indicators');for (let i = 0; i < images.length; i++) {const indicator = document.createElement('div');indicator.classList.add('indicator');if (i === 0) {indicator.classList.add('active-indicator');}indicatorContainer.appendChild(indicator);}}function nextImage() {currentIndex++;if (currentIndex >= images.length) {currentIndex = 0;}showImage(currentIndex);}function prevImage() {currentIndex--;if (currentIndex < 0) {currentIndex = images.length - 1;}showImage(currentIndex);}document.getElementById('next-btn').addEventListener('click', nextImage);document.getElementById('prev-btn').addEventListener('click', prevImage);// Auto-play functionalitysetInterval(nextImage, 2000);createIndicators();showImage(currentIndex);
</script>
</body>
</html>

 

 

 

相关文章：

JavaScript图片轮播

代码在文章最后面&#xff08;含图片URL&#xff09; 实现功能 按向左按钮图片显示上一张按向右按钮图片显示下一张每隔2000毫秒显示下一张图底部三个圆点显示当前的图片的编号 实现流程 初始化图片数组 创建一个包含图片URL的数组&#xff0c;轮播时会通过这个数组来切换图…...

编程日记 2024/7/28 11:47:14

MSSQL注入前置知识

简述 Microsoft SQL server也叫SQL server / MSSQL&#xff0c;由微软推出的关系型数据库&#xff0c;默认端口1433 常见搭配C# / .net IISmssql mssql的数据库文件 数据文件&#xff08;.mdf&#xff09;&#xff1a;主要的数据文件&#xff0c;包含数据表中的数据和对象信息…...

编程日记 2024/7/28 11:44:10

idea一键为实体类赋值

file -> settings -> plugins -> marketplace 把这个插件装上 找个实体&#xff0c;选中&#xff0c;altenter进入edit界面 我是选择只保留右边这种生成方法&#xff0c;然后选择ok 返回到那个实体&#xff0c;选择&#xff0c;altenter generate生成...

编程日记 2024/7/28 11:39:06

秋招突击——7/24——知识补充——JVM类加载机制

文章目录 引言类加载机制知识点复习类的生命周期1、加载2、连接——验证3、连接——准备4、连接——解析5、初始化 类加载器和类加载机制类加载器类加载机制——双亲委派模型 面试题整理1、类加载是什么2、类加载的过程是什么3、有哪些类加载器&#xff1f;4、双亲委派模型是什…...

编程日记 2024/7/28 11:32:59

如何在 Microsoft SQL Server 中增加字段-完整指南

在使用 Microsoft SQL Server (MSSQL) 进行数据库管理时,添加新字段(列)是一项常见的任务。无论你是需要存储额外的信息,还是调整数据模型以适应新的业务需求,本指南都将帮助你轻松完成这项操作。 目录 1. 使用 T-SQL 添加字段2. 使用 SQL Server Management Studio (SSMS) 添加…...

编程日记 2024/7/28 11:31:58

快手电商Android一面凉经(2024)

快手电商Android一面凉经(2024) 笔者作为一名双非二本毕业7年老Android, 最近面试了不少公司, 目前已告一段落, 整理一下各家的面试问题, 打算陆续发布出来, 供有缘人参考。今天给大家带来的是《快手电商Android一面凉经(2024)》。 面试职位: Android工程师 技术一面 面试形式…...

编程日记 2024/7/28 11:30:56

随机点名器

练习1 package lx;import java.io.*; import java.util.ArrayList; import java.util.Collections; import java.util.Random;/*需求&#xff1a;需求&#xff1a;有一个文件里面存储了班级同学的信息&#xff0c;每一个信息占一行。格式为&#xff1a;张三-男-23要求通过程序…...

编程日记 2024/7/28 11:26:52

添加动态云层

<template> <div class"topbox"> xx卫星管理 </div> <div class"selectbox"> <div class"title"> 卫星列表 </div> <el-table :data"tableData" style"width: 100%;height:230px;" …...

编程日记 2024/7/28 11:23:49

Spring Boot组成的分布式系统中实现日志跟踪

Spring Boot组成的分布式系统中实现日志跟踪 首发2024-07-25 08:54潘多编程 在分布式系统中&#xff0c;日志跟踪是一项非常重要的功能&#xff0c;它帮助开发者了解请求在整个系统中的流转过程&#xff0c;这对于调试、监控和故障排查至关重要。Spring Boot应用通常作为微服…...

编程日记 2024/7/28 11:21:48

GPT-4o Mini 模型的性能与成本优势全解析

GPT-4o Mini 模型的性能与成本优势全解析 &#x1f4c8; &#x1f31f; GPT-4o Mini 模型的性能与成本优势全解析 &#x1f4c8;摘要引言正文内容GPT-4o Mini 模型简介 &#x1f680;性能测试与对比 &#x1f4ca;应用场景 &#x1f310;自然语言处理对话系统内容生成 ✍️ &am…...

编程日记 2024/7/28 11:12:38

web前端 - HTML 基础知识大揭秘

HTML 大揭秘 什么是 HTML HTML&#xff08;Hyper Text Markup Language&#xff09;&#xff0c;中文译为超文本标记语言。其中&#xff0c;我们需要注意两个关键词。一个是 超文本&#xff0c;一个是 标记。所谓超文本&#xff0c;就是将不同空间的文字信息通过超链接的方式…...

编程日记 2024/7/28 11:11:37

HTML meta

<meta>标签用于提供html文档的元信息&#xff08;metadata&#xff09;。这些信息不会显示在页面上&#xff0c;但会被浏览器或搜索引擎用来识别页面的编码方式、关键字、描述、作者信息、刷新时间等。 基本语法 <meta name"属性名" content"属性值&q…...

编程日记 2024/7/28 11:10:35

【学习笔记】子集DP

背景 有一类问题和子集有关。 给你一个集合 S S S&#xff0c;令 T T T 为 S S S 的超集&#xff0c;也就是 S S S 所有子集的集合&#xff0c;求 T T T 中所有元素的和。 暴力1 先预处理子集的元素和 A i A_i Ai​&#xff0c;再枚举子集。 for(int s0; s<(1<…...

编程日记 2024/7/28 11:07:32

苦学Opencv的第十四天：人脸检测和人脸识别

Python OpenCV入门到精通学习日记&#xff1a;人脸检测和人脸识别 前言 经过了十三天的不懈努力&#xff0c;我们终于也是来到了人脸检测和人脸识别啦&#xff01;相信大家也很激动吧。接下来我们开始吧&#xff01; 人脸识别是基于人的脸部特征信息进行身份识别的一种生物识…...

编程日记 2024/7/28 11:05:30

PyTorch学习（1）

PyTorch学习&#xff08;1&#xff09; CIFAR-10数据集-图像分类 数据集来源是官方提供的&#xff1a; torchvision.datasets.CIFAR10()共有十类物品&#xff0c;需要用CNN实现图像分类问题。 代码如下&#xff1a;(CIFAR_10_Classifier_Self_1.py) import torch import t…...

编程日记 2024/7/28 11:00:26

三思而后行：计算机行业的决策智慧

在计算机行业&#xff0c;"三思而后行"这一原则显得尤为重要。在这个快速发展、技术不断更新换代的领域&#xff0c;每一个决策都可能对项目的成功与否产生深远的影响。以下是一篇关于在计算机行业中三思重要性的文章。 三思而后行&#xff1a;计算机行业的决策智慧 …...

编程日记 2024/7/28 10:59:25

Linux--Socket编程UDP

前文&#xff1a;Socket套接字编程 UDP协议特点 无连接&#xff1a;UDP在发送数据之前不需要建立连接&#xff0c;减少了开销和发送数据之前的时延。尽最大努力交付&#xff1a;UDP不保证可靠交付&#xff0c;主机不需要维持复杂的连接状态表。面向报文&#xff1a;UDP对应用层…...

编程日记 2024/7/28 10:53:20

《javaEE篇》--单例模式详解

目录 单例模式 饿汉模式 懒汉模式 懒汉模式(优化) 指令重排序 总结 单例模式 单例模式属于一种设计模式&#xff0c;设计模式就好比是一种固定代码套路类似于棋谱&#xff0c;是由前人总结并且记录下来我们可以直接使用的代码设计思路。 单例模式就是&#xff0c;在有…...

编程日记 2024/7/28 10:52:19

Java核心 - Lambda表达式详解与应用示例

作者&#xff1a;逍遥Sean 简介&#xff1a;一个主修Java的Web网站\游戏服务器后端开发者 主页&#xff1a;https://blog.csdn.net/Ureliable 觉得博主文章不错的话&#xff0c;可以三连支持一下~ 如有疑问和建议&#xff0c;请私信或评论留言&#xff01; 前言 Lambda表达式是…...

编程日记 2024/7/28 10:51:18

算法通关：006_1二分查找

二分查找 查找一个数组里面是否存在num主要代码运行结果 详细写法自动生成数组和num&#xff0c;利用对数器查看二分代码是否正确 查找一个数组里面是否存在num 主要代码 /*** Author: ggdpzhk* CreateTime: 2024-07-27*/ public class cg {//二分查找public static boolean …...

编程日记 2024/7/28 10:46:12

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2026/2/8 20:42:53

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2026/1/31 6:12:33

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2026/1/29 17:06:33

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2026/2/2 2:30:58

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32