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

JavaScript图片轮播

news 2026/4/1 8:35:52

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

Ostrakon-VL-8B本地化部署详解：从OpenClaw社区获取模型到一键启动

Ostrakon-VL-8B本地化部署详解&#xff1a;从OpenClaw社区获取模型到一键启动 最近有不少朋友在问&#xff0c;怎么把社区里那些热门的视觉语言大模型&#xff0c;比如Ostrakon-VL-8B&#xff0c;真正部署到自己的服务器或者云平台上&#xff0c;做成一个随时能用的服务。确实…...

编程新知 2026/4/1 8:10:07

服务器很卡，是CC攻击造成的吗

之前有客户反馈&#xff0c;服务器有一段时间使用总是会遇到卡的情况&#xff0c;查看并无流量攻击的情况&#xff0c;程序也未进行过什么修改&#xff0c;用户人数也没有什么变化。来咨询是什么原因导致的。导致机器卡的情况&#xff0c;一般有带宽不够&#xff0c;硬件性能不…...

编程新知 2026/4/1 6:48:05

基于物理信息神经网络的Burgers-Fisher方程求解方法研究（Python代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程新知 2026/4/1 6:17:27

PXE装机避坑大全：从TFTP根目录设置到Kickstart无人值守的13个常见错误修复

PXE装机避坑大全&#xff1a;从TFTP根目录设置到Kickstart无人值守的13个常见错误修复 在企业级IT运维中&#xff0c;PXE&#xff08;预启动执行环境&#xff09;网络装机技术因其高效、自动化的特点&#xff0c;已成为服务器批量部署的标配方案。但看似简单的PXE部署流程背后&…...

编程新知 2026/4/1 5:43:02

Phi-4-mini-reasoning效果展示：同参数量级中推理准确率超Llama3-8B实测对比

Phi-4-mini-reasoning效果展示&#xff1a;同参数量级中推理准确率超Llama3-8B实测对比 1. 开篇亮点&#xff1a;小模型的大智慧 Phi-4-mini-reasoning这款仅有3.8B参数的轻量级开源模型&#xff0c;正在重新定义我们对小模型能力的认知。作为专为数学推理、逻辑推导和多步解…...

编程新知 2026/4/1 5:12:54

Wan2.2-I2V-A14B私有部署镜像优势：零依赖冲突、开箱即用、免编译安装

Wan2.2-I2V-A14B私有部署镜像优势&#xff1a;零依赖冲突、开箱即用、免编译安装 1. 镜像核心价值与定位 Wan2.2-I2V-A14B私有部署镜像是专为文生视频场景打造的一站式解决方案。这个镜像最大的特点就是解决了AI模型部署中最让人头疼的环境配置问题&#xff0c;真正做到下载即…...

编程新知 2026/4/1 4:52:24

保姆级教程：NotaGen一键部署，小白也能生成贝多芬风格交响乐

保姆级教程&#xff1a;NotaGen一键部署&#xff0c;小白也能生成贝多芬风格交响乐 1. 引言&#xff1a;AI音乐创作新体验 你是否曾经梦想过创作一首属于自己的交响乐&#xff1f;现在&#xff0c;NotaGen让这个梦想变得触手可及。这个基于大语言模型(LLM)的音乐生成工具&…...

编程新知 2026/4/1 4:19:50

windows版vasp-6.5.1非Cygwin版

推荐使用oneapi版本&#xff0c;这个版本性能要好一点。 1.解压压缩包。 Gromacs&Vasp软.件.交.流&#xff1a;962946828 2.用VASP安装器添加系统环境变量&#xff08;选择bin目录所在目录的父级目录&#xff09;。 3.测试命令&#xff08;在cmd或者powershell执行&#…...

编程新知 2026/4/1 3:59:39

Vue 中的 deep、v-deep 和 ＞＞＞ 有什么区别？什么时候该用

点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; “你用 Element Plus 写了个按钮&#xff0c;想改下 hover 颜色&#xff0c;结果死活不生效&#xff01;最后查了半天&#xff0c;发现得加个 :deep() 才行” 其实&#xff0c;这是 Vue 中一个非常常见的坑&#xf…...

编程新知 2026/4/1 3:55:39

树莓派4B上跑YOLOv8n-NCNN，实测2FPS？别急，这有份从模型转换到C++代码的完整调优指南

树莓派4B上跑YOLOv8n-NCNN性能调优实战&#xff1a;从2FPS到流畅推理的完整指南 当你在树莓派4B上成功部署YOLOv8n-NCNN后&#xff0c;发现推理速度只有可怜的2FPS时&#xff0c;是否感到沮丧&#xff1f;别担心&#xff0c;这不是硬件性能的终点。本文将带你深入分析性能瓶颈&…...

编程新知 2026/4/1 3:29:10