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

JavaScript轮播图实现

news 2025/10/24 19:29:41

这个代码创建了一个简单的轮播图，可以通过点击左右箭头或自动播放来切换图片。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>js轮播图练习</title><style>.box {width: 60vw;height: 500px;margin: auto;position: relative;overflow: hidden;}.banner {display: flex;height: 100%;transition: all 3s;}.banner>img {width: 60vw;}.but {width: 100%;height: 40px;position: absolute;top: 240px;display: flex;justify-content: space-between;}/* 箭头样式 */.but div {width: 30px;height: 40px;line-height: 40px;text-align: center;background-color: rgba(0, 0, 0, 0.4);font-size: 20px;color: white;cursor: pointer;}/* 小圆点区域 */.icon {width: 100%;height: 30px;display: flex;justify-content: center;position: absolute;bottom: 0;}.icon>span {width: 10px;height: 10px;border-radius: 100%;background-color: gray;margin-left: 5px;}</style></head><body><!-- 可视区域 --><div class="box" onmouseover="move()" onmouseout="moves()"><!-- 存放图片的容器 --><div class="banner"><img src="" alt="" class="inge" /></div><!-- 箭头区域 --><div class="but"><div class="left" onclick="sport()">←</div><div class="right" onclick="sports()">→ </div></div><!-- 小圆点区域 --><div class="icon"></div></div></body><script>let data;// 定义一个充当下标let k = 0;let dot;let inter; // 定义定时器变量// 获取大图片容器let banner = document.getElementsByClassName('banner')[0];// 获取小圆点区域let round = document.getElementsByClassName('icon')[0];// 获取左右箭头let left = document.getElementsByClassName('left');let right = document.getElementsByClassName('right');let imgwidth;// 获取JSON假数据let shop = new XMLHttpRequest();// json假数据自己写一下,图片名称用的是picshop.open('get', 'js/index.json', true);shop.send();shop.onreadystatechange = function() {if (shop.readyState == 4 && shop.status == 200) {let text = shop.responseText;data = JSON.parse(text);console.log(data);ran();}};// 渲染函数function ran() {let str = '';let roundstr = '';for (let i = 0; i < data.length; i++) {// 字符串拼接图片str += `<img src="${data[i].pic}" class="inge"/>`;// 字符串拼接小圆点指示器roundstr += `<span style="background-color:${i==0?'pink':'gray'}"></span>`}// 添加第一张图片以实现无缝轮播str += `<img src="${data[0].pic}" class="inge"/>`;// 将拼接的图片插入到轮播图长条内容区域banner.innerHTML = str;// 将拼接的小圆点指示器插入到页面中round.innerHTML = roundstr;// 获取图片的宽imgwidth = document.getElementsByClassName('inge')[0].offsetWidth;// 获取小圆点指示器dot = document.getElementsByTagName('span');// 设置定时器inter = setInterval(scrolls, 2000);dot[0].style.backgroundColor = 'pink';}// 图片自动轮播函数function scrolls() {// 增加索引 k，表示当前显示的图片k++;banner.style.transform = `translate(-${k*imgwidth}px)`;banner.style.transition = `transform 0.5s ease`;// 如果 k 超过数据长度，则重置为 0（循环播放）if (k > data.length - 1) {k = 0; // 重置索引dot[k].style.backgroundColor = 'pink';dot[data.length - 1].style.backgroundColor = 'gray';setTimeout(() => {// 设置延迟后将 banner 的位移和过渡效果重置banner.style.transform = `translate(-${k*imgwidth}px)`;banner.style.transition = `none`;}, 500);} else {dot[k].style.backgroundColor = 'pink';dot[k - 1].style.backgroundColor = 'gray';}}// 鼠标移出移入function move() {clearInterval(inter);}function moves() {inter = setInterval(scrolls, 2000);}// 点击左右箭头let throttle = false; // 声明节流function sport() {// 判断如果正在节流则返回if (throttle) return;// 开始节流throttle = true;//清除定时器以避免冲突clearInterval(inter);if (k == 0) {k = 0; // 重置索引dot[k].style.backgroundColor = 'gray';dot[data.length - 1].style.backgroundColor = 'pink';// 将索引设置为数据长度，以便准备显示最后一张图片k = data.length;banner.style.transform = `translate(-${k * imgwidth}px)`; // 向左滑动至最后一张banner.style.transition = `none`; // 移除过渡效果} else {dot[k].style.backgroundColor = 'gray'; // 当前小圆点设为灰色dot[k - 1].style.backgroundColor = 'pink'; // 前一小圆点设为粉色}setTimeout(() => {k--;banner.style.transform = `translate(-${k*imgwidth}px)`; // 更新位移banner.style.transition = `transform 0.5s ease`; // 设置过渡效果}, 10);// 设置定时器，0.5秒后取消setTimeout(() => {throttle = false;}, 500);}// 点击向右移动function sports() {if (throttle) return;throttle = true; // 开始节流clearInterval(inter); // 清除定时器scrolls(); // 调用滚动函数// 设置定时器，0.5秒后取消节流setTimeout(() => {throttle = false;}, 500);}</script>
</html>

JavaScript轮播图，此代码他：

  • 实现了切换图片的功能（上一张、下一张、指定索引）。
  • 创建了小圆点并更新其状态。
  • 实现了自动播放功能，每2秒切换一次图片。

相关文章：

JavaScript轮播图实现

这个代码创建了一个简单的轮播图&#xff0c;可以通过点击左右箭头或自动播放来切换图片。 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>js轮播图练习</title><style>.box {width: 60vw;height: 500px;m…...

编程日记 2024/10/11 23:05:17

【LLM开源项目】LLMs-开发框架-Langchain-Tutorials-Basics-v2.0

【1】使用LCEL构建简单的LLM应用程序(Build a Simple LLM Application with LCEL) https://python.langchain.com/docs/tutorials/llm_chain/ 如何使用LangChain构建简单的LLM应用程序。功能&#xff1a;将把文本从英语翻译成另一种语言。 实现&#xff1a;LLM调用加上一些提…...

编程日记 2024/10/11 23:04:16

Python 爬取天气预报并进行可视化分析

今天&#xff0c;我们就来学习如何使用 Python 爬取天气预报数据&#xff0c;并用数据可视化的方式将未来几天的天气信息一目了然地展示出来。 在本文中&#xff0c;我们将分三步完成这一任务&#xff1a; 使用 Python 爬取天气数据数据解析与处理用可视化展示天气趋势 让我…...

编程日记 2024/10/11 23:03:14

最左侧冗余覆盖子串

题目描述 给定两个字符串 s1 和 s2 和正整数 k&#xff0c;其中 s1 长度为 n1&#xff0c;s2 长度为 n2。 在 s2 中选一个子串&#xff0c;若满足下面条件&#xff0c;则称 s2 以长度 k 冗余覆盖 s1 该子串长度为 n1 k 该子串中包含 s1 中全部字母 该子串每个字母出现次数…...

编程日记 2024/10/11 23:00:10

性能测试-JMeter(2)

JMeter JMeter断言响应断言JSON断言断言持续时间 JMeter关联正则表达式提取器正则表达式正则表达式提取器 XPath提取器JSON提取器 JMeter属性JMeter录制脚本 JMeter断言 断言&#xff1a;让程序自动判断预期结果和实际结果是否一致 提示&#xff1a; -Jmeter在请求的返回层面有…...

编程日记 2024/10/11 22:58:06

芯课堂 | Synwit_UI_Creator（μgui）平台之图像处理篇

今天小编给大家介绍的是UI_Creator&#xff08;μgui&#xff09;平台下关于图像处理的选项。 UI_Creator&#xff08;μgui&#xff09;平台图片类控件有图像控件和分级图像控件&#xff0c;均包含以下选项&#xff1a; 1、消除水波纹&#xff1a; 由于16位真彩色&#xff08…...

编程日记 2024/10/11 22:57:04

QT C++ 软键盘/悬浮键盘/触摸屏键盘的制作

目录 1、前言 2、界面设计 3、英文、数字的输入 4、符号的输入 5、中文的输入 6、中文拼音库的选择 7、其他 8、结语 1、前言 使用QT C在带显示器的Linux系统 开发板上&#xff08;树莓派等&#xff09;编写操作UI界面时&#xff0c;很多时候都需要一个软键盘来输入文字…...

编程日记 2024/10/11 22:55:02

element-ui点击文字查看图片预览功能

今天做一个点击文字查看图片的功能&#xff0c;大体页面长这样子&#xff0c;点击查看显示对应的图片 引入el-image-viewer&#xff0c;点击的文字时候设置图片预览组件显示并传入图片的地址 关键代码 <el-link v-if"scope.row.fileList.length > 0" type&…...

编程日记 2024/10/11 22:52:56

SpringBoot集成Redis使用Cache缓存

使用SpringBoot集成Redis使用Cache缓存只要配置相应的配置类&#xff0c;然后使用Cache注解就能实现 RedisConfig配置 新建RedisConfig配置类 package com.bdqn.redis.config;import com.fasterxml.jackson.annotation.JsonAutoDetect; import com.fasterxml.jackson.annota…...

编程日记 2024/10/11 22:50:54

【瑞萨RA8D1 CPK开发板】lcd显示

1.8寸lcd使用gpio模拟spi驱动 由于板子引出的接口限制&#xff0c;故使用gpio模拟spi驱动中景园的1.8寸lcd 1.77寸液晶屏 1.8寸TFT LCD SPI TFT彩屏st7735驱动128x160高清屏-淘宝网 (taobao.com) 使用RASC 的gpio配置 根据厂家提供的驱动文件移植 #define LCD_SCLK_Clr() g…...

编程日记 2024/10/11 22:49:52

算法收敛的一些证明方法与案例

证明一个算法收敛通常涉及多个角度&#xff0c;以下是一些常用的方法和示例&#xff1a; 一、方法 1. 数学归纳法 通过数学归纳法证明算法在每一步的输出结果都在收敛范围内。 示例&#xff1a;考虑一个递归算法&#xff0c;假设我们要证明它在每一步中输出的值逐渐接近目标…...

编程日记 2024/10/11 22:48:51

基于vue框架的蛋糕店网上商城740g7（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,店长,商品分类,商品信息,订单投诉,反馈信息 开题报告内容 基于Vue框架的蛋糕店网上商城开题报告 一、项目背景与意义 随着互联网技术的快速发展和普及&#xff0c;电子商务已成为现代商业的重要组成部分。蛋糕作为一种受欢迎的美…...

编程日记 2024/10/11 22:47:49

你真的了解Canvas吗--解密六【ZRender篇】

目录 &#x1f4da;入口 Circle - 图形 Group - 组 事件捕获 - 流程 step - 1 step - 2 总结 这篇文章我们讲讲Circle圆形&#xff0c;Group组的使用以及大家最熟悉又陌生的事件捕获和冒泡在ZRender中的实现&#xff0c;篇幅较长&#xff0c;且听我慢慢分析。 &#x…...

编程日记 2024/10/11 22:46:48

孤独相伴 - 结婚十七年

07年的今天&#xff0c;我和老公请假&#xff0c;去了新加坡的大使馆领证。 17年后的今天&#xff0c;此刻凌晨16分&#xff0c; 这是17年来我第一次这么早写结婚纪念&#xff0c;只是凑巧。 今天的心情莫名其妙。 此刻&#xff0c;两个词出现在我的脑海&#xff1a;孤独 &am…...

编程日记 2024/10/11 22:45:47

json-server,跨域

启动json-serer json-server --watch db.json 注意&#xff1a; db.json为json文件的名称&#xff0c;你自己的文件名叫什么&#xff0c;就启动对应的文件就可以了 启动json-server的时候&#xff0c;必须在你db.json所在的文件夹下进行启动 这样服务器就可以启动成功了&…...

编程日记 2024/10/11 22:44:46

【Conda】修复 Anaconda 安装并保留虚拟环境的详细指南

目录 流程图示1. 下载 Anaconda 安装程序2. 重命名现有的 Anaconda 安装目录Windows 操作系统Linux 操作系统 3. 运行新的 Anaconda 安装程序Windows 操作系统Linux 操作系统 4. 同步原环境使用 robocopy 命令&#xff08;Windows&#xff09;使用 rsync 命令&#xff08;Linux…...

编程日记 2024/10/11 22:43:45

转行高薪 AI 产品经理，快速入门方法在此处

根据《2024年中国AI大模型场景探索及产业应用调研报告》&#xff0c;当前整体AI大模型行业仍然处于萌芽期&#xff0c;但市场规模增速较快。2023年我国AI大模型行业规模达到了147亿元&#xff0c;近三年复合增速高达114%。预计2024年&#xff0c;该市场规模将进一步增长至216亿…...

编程日记 2024/10/11 22:42:44

初识环境变量

初识环境变量 目录&#xff1a; 什么是环境变量常见的环境变量Linux中与环境变量的有关的命令如何获取环境变量环境变量的特点环境变量的作用 1.什么是环境变量 我们在Linux操作系统下&#xff0c;使用指令&#xff0c;比如ls,pwd,cd等等&#xff0c;可以直接使用&#xff0c…...

编程日记 2024/10/11 22:39:40

成像基础 -- 景深计算

景深计算 景深&#xff08;Depth of Field, DOF&#xff09;指的是在摄影中&#xff0c;能够清晰成像的物体前后距离的范围。景深的大小取决于多个因素&#xff0c;包括焦距、光圈值、物距以及相机感光元件的尺寸。 1. 景深的主要参数 焦距&#xff08; f f f&#xff09;&a…...

编程日记 2024/10/11 22:38:39

Git中从dev分支恢复master分支

问题 需要从dev分支恢复master分支。之前搞错远程地址了&#xff0c;把master分支搞乱了&#xff0c;现在需要从dev分支恢复代码到master分支。 步骤 git checkout dev # 切换到 dev 分支 git branch -D master # 删除本地 master 分支 git checko…...

编程日记 2024/10/11 22:36:36

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/9/18 15:40:29

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/10/24 5:14:45

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/10/23 2:27:01

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2025/10/24 3:10:00

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2025/10/19 16:17:52

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2025/10/24 15:10:51

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

编程新知 2025/9/18 22:43:13

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...

编程新知 2025/7/7 14:36:50

数据库——redis

一、Redis 介绍 1. 概述 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的、高性能的内存键值数据库系统&#xff0c;具有以下核心特点&#xff1a; 内存存储架构&#xff1a;数据主要存储在内存中&#xff0c;提供微秒级的读写响应 多数据结构支持&…...

编程新知 2025/7/31 10:23:08