5.2 JavaScript 案例 - 轮播图
JavaScript - 轮播图
文章目录
- JavaScript - 轮播图
- 基础模版
- 一、刷新页面随机轮播图案例
- 二、轮播图 定时器版
- 三、轮播图完整版
基础模版
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图点击切换</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body>
<div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div>
</div>
<script>// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]</script>
</body></html>
一、刷新页面随机轮播图案例
需求：当我们刷新页面，页面中的轮播图会显示不同的照片以及样式
模块
- 刷新后图片会随机变换
- 当图片变化后，底部盒子背景颜色和文字内容会变换
- 当图片变化后，小圆点随机一个高亮显示
页面分析
首先使用一个盒子存放图片
其次再使用一个底部模版存放按钮及图片的标题
这里的ul-li，就是里面的底部模块的小点
逻辑分析
-
准备一个数组对象，里面包含详细信息
-
随机选择一个数字，选出数组对应的对象，更换图片，底部盒子背景颜色及文字内容
-
利用随机数字，让小圆点添加高亮的类(addClass)，这里利用CSS结构伪类选择器
代码如下所示
目前还不是一个很完整的轮播图，不能点击小圆点、不能前后左右翻页，后面会慢慢的完善
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>轮播图点击切换</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body>
<div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt=""/></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><!--active是高亮的样式--><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div>
</div>
<script>//1.初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' }]//2.创建随机数// function getRandom(N, M) {// return Math.floor(Math.random() * (M - N + 1)) + N// }//const random = getRandom(1,8)const random = parseInt(Math.random() * sliderData.length) //或者是这么生成随机数也行//3.把对应的数据渲染到标签里面// 3.1获取图片const img = document.querySelector('.slider-wrapper img')//表示slider-wrapper类中的第一个img标签// 3.2修改图片的路径img.src = sliderData[random].url// 3.3获取标签pconst p = document.querySelector('.slider-footer p')//表示slider-footer类中的第一个p标签p.innerHTML = sliderData[random].title// 3.4修改slider-footer中背景板的颜色const sliderFooterDocument = document.querySelector('.slider-footer')sliderFooterDocument.style.backgroundColor = sliderData[random].color//4.底部ul-li进行切换，对应的li进行高亮//这个地方没有用all，因为用all筛选的是一个伪数组const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)//选中第random+1个li（因为random是0-7 而li是1-8）//当前选中的li添加active这个类li.classList.add('active')
</script>
</body></html>
二、轮播图 定时器版
承接上面的代码
需求：每隔一秒钟切换一个图片
分析
-
准备一个数组对象，里面包含详情信息（素材包含）
-
获取元素
-
设置定时器函数
设置变量++
找到变量对应的对象
更改图片、文字信息
激活小圆点，移除上一个高亮的类名，当前变量对应的小圆点添加类
-
处理图片自动复原从头播放（放到变量++后面，紧挨）
如果图片播放到最后一张，就是大于等于数组的长度
则把变量重置为0
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>轮播图点击切换</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body>
<div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt=""/></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div>
</div>
<script>// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' }]//2.获取元素const img = document.querySelector('.slider-wrapper img') //图片元素const p = document.querySelector('.slider-footer p') //p标签let i = 0//3.开启定时器//轮播图的第一张可以不用参与变化，1s后直接播放第二章即可setInterval(function() {i++if (i >= sliderData.length) {// 超过数组长度的话，初始化i = 0}// const obj = sliderData[i]//更换图片路径img.src = sliderData[i].url//字p.innerHTML = sliderData[i].title//小圆点 小圆点从1开始数的//删除之前的activedocument.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')//小圆点高亮显示}, 1000)</script>
</body></html>
三、轮播图完整版
需求：当点击左右按钮的时候，可以切换轮播图
分析
- 右侧按钮点击，变量++，如果大于等于8，则复原0
- 左侧按钮点击，变量–，如果小于0，则复原最后一张
- 鼠标经过暂停定时器
- 鼠标离开开启定时器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>轮播图点击切换</title><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body>
<div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt=""/></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev"><</button><button class="next">></button></div></div>
</div>
<script>// 1. 初始数据const data = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' }]//准备工作，获取元素const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const footer = document.querySelector('.slider-footer')//1.右按钮业务//1.1 获取右侧按钮const next = document.querySelector('.next')let i = 0 //信号量 控制播放图片张数//1.2 注册点击事件next.addEventListener('click', function() {//播放下一张图片i++if (i >= data.length) {//初始化为第一张i = 0}toggle()//1.3 得到对应的图片对象//1.4 渲染对应的对象// img.src = data[i].url// p.innerHTML = data[i].title// footer.style.backgroundColor = data[i].color// //1.5更换小圆点 先移除原来的类名，当前的li再添加active类名// document.querySelector('.slider-indicator .active').classList.remove('active')// document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')})//2.左侧按钮业务//2.1 获取左侧按钮const prev = document.querySelector('.prev')//2.2 注册点击事件prev.addEventListener('click', function() {//播放下一张图片i--if (i < 0) {//初始化为第一张i = data.length - 1}toggle()//1.3 得到对应的图片对象//1.4 渲染对应的对象// img.src = data[i].url// p.innerHTML = data[i].title// footer.style.backgroundColor = data[i].color// //1.5更换小圆点 先移除原来的类名，当前的li再添加active类名// document.querySelector('.slider-indicator .active').classList.remove('active')// document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')})//3.声明一个渲染的函数作为复用function toggle() {//1.3 得到对应的图片对象//1.4 渲染对应的对象img.src = data[i].urlp.innerHTML = data[i].titlefooter.style.backgroundColor = data[i].color//1.5更换小圆点 先移除原来的类名，当前的li再添加active类名document.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}//4.自动播放模块let timerId = setInterval(function() {//利用JS，自动调用点击事件next.click()}, 1000)//5.鼠标经过大盒子暂停定时器，鼠标移动过大盒子后，开启定时器const slider = document.querySelector('.slider')//注册事件slider.addEventListener('mouseenter', function() {clearInterval(timerId)})slider.addEventListener('mouseleave', function() {//这个定时器相当于先开再关的timerId = setInterval(function() {//利用JS，自动调用点击事件next.click()}, 1000)})</script>
</body></html>
相关文章：
5.2 JavaScript 案例 - 轮播图
JavaScript - 轮播图 文章目录 JavaScript - 轮播图基础模版一、刷新页面随机轮播图案例二、轮播图 定时器版三、轮播图完整版 基础模版 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"…...
使用IP自签名SSL证书
最近需要创建WebSocket服务器并使用SSL证书，由于是内网测试，所以需要使用指定IP的自签SSL证书。 其实笔者前面博文 使用nexus3作为Docker镜像仓库 解决nexus3登录x509: certificate has expired or is not yet valid 中有创建过相应的证书，这…...
数据库中的运算符
1.算术运算符 算术运算符主要用于数学运算，其可以连接运算符前后的两个数值或表达式，对数值或表达式进行加（）、减（-）、乘（*）、除（/）和取模（%&…...
定制erp真的很贵吗？
定制ERP真的很贵吗？这个问题，相信很多企业在考虑是否实施ERP系统时，都会纠结。特别是对于一些中小型企业，预算有限，心里总会有个疑问：花大价钱定制一个系统，真的值得吗？其实…...
Java Integer的数值比较
文章目录 环境问题答案说明解决办法其它总结 环境 Windows 11 专业版Java 21 问题 下面这段代码的运行结果是什么？ Integer i1 0;int i2 0;for (int n 0; n < 200; n) {if (i1 ! i2) {System.out.println("i1 " i1 ", i2 " i2);b…...
QGroundControl之5-AppSettings.cc
介绍 应用程序设置 Application Settings ，这里看下语言选择功能，它是怎么和json文件关联起来的，刚刚看的时候，很是奇怪这么多的json文件作用。 1.AppSettings.cc 文件怎么和App.SettingsGroup.json关联 在AppSettings.cc文件没…...
Django Fixtures 使用指南：JSON 格式详解
在Django开发中，fixtures是一种非常有用的工具，它们可以帮助我们序列化数据库内容，并在不同的环境或测试中重用这些数据。本文将详细介绍Django fixtures的概念、如何生成和使用JSON格式的fixtures。 什么是Fixtures？ Fixtures是…...
单元测试SpringBoot
添加测试专用属性 加载测试专用bean Web环境模拟测试 数据层测试回滚 测试用例数据设定...
邮件营销平台应如何提升外贸开发信的效果？
邮件营销平台在外贸中优势包括高效市场定位、成本效益、增强客户关系、实时反馈优化、全球覆盖及时区优化、环保可持续性。Geeksend邮件营销是强大平台，高效管理，精准销售，把握外贸市场的每一个机遇，助力外贸企业精准定位、简化管…...
绘制折线图遇到问题记录
绘制折线图 主要参考：https://blog.csdn.net/qq_38029916/article/details/121611066 对应代码 import csv import matplotlib.pyplot as plt import pandas as pd import numpy as np plt.rcParams[font.sans-serif] [SimHei] plt.rcParams[font.family] sans…...
python 调Qt C++ 写法配置和坑点
python 示例写法 和调c动态库一样 通过回调函数方式 将python函数注册到c 动态库中 from ctypes import *def DllCall(nParam, nFlag):print(nParam, nFlag)z2 0.6z3 0.4z4 0.0z5 0.3z6 0.5z7 0.8z8 0.3z9 0.9strData str(z2) str(z3) str(z4) str(z5)…...
css设置透明的几种办法
在CSS中，有几种方法可以设置元素的透明度。以下是主要的几种方式： 1. 使用 opacity 属性 定义：opacity 属性用于设置元素的整体透明度，包括其内容和背景。取值范围：取值从0（完全透明）到1&…...
刷题日志【4】
目录 1、猜数字大小 1、猜数字大小 题意有点抽象，我大概讲一下，就是在1——n里面会有一个目标数，我们通过猜数字的方式逼近这个数字，直到解出这个数，之前我们是用二分法求最快达到求解的问题，这道题多了每…...
如何制作自己的字体文件.ttf
日常编程中，一些常用的符号可以直接用来当做图标使用，不需要引入过多的资源文件（例如：ico、png、svg等）十分方便！ 笔者发现iconfont网站可以选择自己需要的图标，制作成.ttf文件来直接使用&…...
gradle在IDEA 中无法使用的启动守护线程的问题
最近打开一个比较早的项目，Gradle 配置没有问题，IDEA 打开Java项目却不能初始化守护线程，UI 上只能看到失败，看不到具体原因。 首先尝试了升级最新的gradle 版本8.11, 实际上这个版本在本地命令行都不能正常工作，没有…...
Spring Boot 配置多数据源并手动配置事务
Spring Boot 配置多数据源并手动配置事务 一、为什么多数据源需要手动配置？二、配置多数据源1. 数据源配置类 (DataSourceConfig)2. 主数据库 MyBatis 配置类 (PrimaryDbMyBatisConfig)3. 从数据库 MyBatis 配置类 (SecondaryDbMyBatisConfig)4. application.yml 配…...
YashanDB 23.2 YAC 共享集群部署和使用自带YMP迁移工具进行数据迁移，效果很city
1. 环境准备 本文以经典架构（2 台服务器，1 共享存储且包含 3 个及以上 LUN）为例，搭建双实例单库的共享集群环境。 主机名 IP 版本 CPU 内存 硬盘 用途 yac1 192.168.50.60 Kylin-Server-V10-SP3 4C 8G 100G YAC 集群…...
【数学】矩阵的逆与伪逆 EEGLAB
文章目录 前言matlab代码作用EEGLAB 中的代码总结参考文献 前言 在 EEGLAB 的使用中，运行程序时出现了矩阵接近奇异值，或者缩放错误。结果可能不准确。RCOND 1.873732e-20 的 bug，调查 EEGLAB 后发现是 raw 数据的问题。 matlab代码 A_1 …...
狐猬编程 C++ L3 第7课 字符串入门 元音字母
给你一个所有字符都是字母的字符串， 请输出其中元音字母的个数。（提示： 二十六个字母中的五个元音字母是 a， e， i， o， u; 所有字符有大小写区别。） 输入格式 仅一行， 包…...
APP UI自动化测试的思路小结
在移动互联网飞速发展的今天，APP质量直接影响用户体验。为了保障UI功能的稳定性和一致性，APP UI自动化测试已经成为各大企业必不可少的一环。那么如何设计一套高效的测试方案？本篇为你总结关键思路！ 如何从零构建UI自动化测试&am…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。 地震勘探中，有效波和干扰波是相对的。例如，在反射波…...
深入剖析AI大模型：大模型时代的 Prompt 工程全解析
今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）
一、OpenBCI_GUI 项目概述 （一）项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台，其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言，首次接触 OpenBCI 设备时，往…...
0609)
书籍“之“字形打印矩阵(8)0609
题目 给定一个矩阵matrix，按照"之"字形的方式打印这个矩阵，例如： 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为：1，…...
GAN模式奔溃的探讨论文综述（一）
简介 简介：今天带来一篇关于GAN的，对于模式奔溃的一个探讨的一个问题，帮助大家更好的解决训练中遇到的一个难题。 论文题目：An in-depth review and analysis of mode collapse in GAN 期刊：Machine Learning 链接：...
CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx
“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网（IIoT）场景中，结合 DDS（Data Distribution Service） 和 Rx（Reactive Extensions） 技术，实现 …...