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

JavaScript图片轮播

news 2025/12/15 11:17:43

代码在文章最后面（含图片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

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/11/25 22:59:17

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/11/9 11:32:13

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2025/12/10 20:47:41

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2025/8/22 13:56:38

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/12/15 5:25:28

Leetcode33（ 搜索旋转排序数组）

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

编程新知 2025/11/29 0:44:34

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...

编程新知 2025/9/12 8:55:56