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

JavaScript图片轮播

news 2026/2/11 0:35: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

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/2/4 18:07:02

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/12/3 10:52:37

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

Linux 内存管理实战精讲：核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

编程新知 2026/2/10 11:15:13

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

编程新知 2026/1/11 6:22:16

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2026/2/2 11:58:16

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2026/2/5 19:40:10