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

js之简单轮播图

news 2025/9/11 22:56:15

今天给大家封装一个简单的轮播图,可以点击下一张上一张以及自动轮播

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>走马灯示例</title><style>body {font-family: Arial, sans-serif;background-color: #f9f9f9;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.carousel-container {position: relative;width: 80%;max-width: 600px;overflow: hidden;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}.carousel {display: flex;transition: transform 0.5s ease;}.carousel-item {min-width: 100%;box-sizing: border-box;padding: 20px;background-color: #fff;border: 1px solid #ddd;border-radius: 10px;text-align: center;}.carousel-button {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);border: none;color: #fff;padding: 10px;cursor: pointer;border-radius: 50%;font-size: 18px;}.carousel-button.prev {left: 10px;}.carousel-button.next {right: 10px;}.carousel-button:hover {background-color: rgba(0, 0, 0, 0.7);}</style></head><body><div class="carousel-container"><div class="carousel"><div class="carousel-item">项目 1</div><div class="carousel-item">项目 2</div><div class="carousel-item">项目 3</div><div class="carousel-item">项目 4</div><div class="carousel-item">项目 5</div></div><button class="carousel-button prev" onclick="prevSlide()">&#10094;</button><button class="carousel-button next" onclick="nextSlide()">&#10095;</button></div><script>var currentIndex = 0;function showSlide(index) {var carousel = document.querySelector('.carousel');var items = document.querySelectorAll('.carousel-item');var totalItems = items.length;if (index >= totalItems) {currentIndex = 0;} else if (index < 0) {currentIndex = totalItems - 1;} else {currentIndex = index;}var offset = -currentIndex * 100;carousel.style.transform = 'translateX(' + offset + '%)';}function nextSlide() {showSlide(currentIndex + 1);}function prevSlide() {showSlide(currentIndex - 1);}// 自动播放功能setInterval(function() {nextSlide();}, 3000); // 每3秒切换一次</script></body>
</html>

如上图所示的效果,需要修改下样式更好看

我是小辉,谢谢大家关注

js之简单轮播图

今天给大家封装一个简单的轮播图,可以点击下一张上一张以及自动轮播 <!DOCTYPE html> <html><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>走马…...

编程日记 2024/6/12 1:59:46

GitLab教程（二）：快手上手Git

文章目录 1.将远端代码克隆到本地2.修改本地代码并提交到远程仓库3.Git命令总结git clonegit statusgit addgit commitgit pushgit log 首先，我在Gitlab上创建了一个远程仓库，用于演示使用Gitlab进行版本管理的完整流程： 1.将远端代码克隆到本…...

编程日记 2024/6/12 1:55:41

前端渲染大量数据思路【虚拟列表】【异步机制】

当浏览器遇到性能瓶颈导致页面卡顿时，你会怎么处理？如何查找问题的原因？ 浏览器本身自带性能检测工具，通常我们分析由脚本导致的页面卡顿会选择性能（performance） 选项卡，在其中我们可以找到导…...

编程日记 2024/6/12 1:52:38

邮箱大师下载官网自行下载，下载后文件名“mail.deb" https://dashi.163.com/ 安装发现缺少依赖 #mermaid-svg-8wqpqFSBVOPD7NGP {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8wqpqFSBVOPD7NGP …...

编程日记 2024/6/12 1:51:36

PDF编辑与转换的终极工具智能PDF处理Acrobat Pro DC

Acrobat Pro DC 2023是一款功能全面的PDF编辑管理软件，支持创建、编辑、转换、签署和共享PDF文件。它具备OCR技术，可将扫描文档转换为可编辑文本，同时提供智能PDF处理技术，确保文件完整性和可读性。此外，软件还支持电子…...

编程日记 2024/6/12 1:50:36

Django UpdateView视图

UpdateView是Django中的一个通用视图，用于处理对象的更新操作。它允许用户更新一个已经存在的对象。UpdateView通常与一个模型表单一起使用，这样用户就可以看到当前对象的值，并可以修改它们。 1，添加视图 Test/app3/views.py fr…...

编程日记 2024/6/12 1:47:33

【CS.SE】2024年，你应该选择计算机专业吗？详细分析与未来展望

文章目录 1. 引言1.1 背景介绍 2. 计算机相关专业的现状与挑战2. 计算机相关专业的现状与挑战2.1 行业内的就业趋势2.1.1 现有就业数据2.1.2 行业需求变化 2.2 市场饱和度与竞争2.2.1 毕业生数量增长2.2.2 薪资与职业发展 2.3 技术创新与行业发展2.3.1 新兴技术的发展2.3.2 全球…...

编程日记 2024/6/12 1:46:32

后端开发面经系列 -- 华为OD -- C++面经（全）

华为OD – C面经（全） 公众号：阿Q技术站文章目录华为OD -- C面经（全）一面1、C结构体和类的区别，类默认的访问权限，结构体可以定义成员函数吗？2、多态的意义？多态的意义…...

编程日记 2024/6/12 1:45:31

3072. 将元素分配到两个数组中 II Rust 线段树 + 离散化

题目给你一个下标从 1 开始、长度为 n 的整数数组 nums 。现定义函数 greaterCount ，使得 greaterCount(arr, val) 返回数组 arr 中严格大于 val 的元素数量。你需要使用 n 次操作，将 nums 的所有元素分配到两个数组 arr1 和 arr2 中。在第一次操…...

编程日记 2024/6/12 1:43:29

day35|1005.K次取反后最大化的数组和 134. 加油站135. 分发糖果

文章目录 python语法记录 sort格式 1005.K次取反后最大化的数组和思路方法一方法二按照绝对值排序教程🎈✨ 背住按照绝对值进行降序排序的语法是： 134. 加油站思路方法一教程解法方法二暴力求解 135. 分发糖果思路方法一总结 python语法记录 sort …...

编程日记 2024/6/12 1:42:28

HWA和BSS区别

芯片中的HWA（Hardware Accelerator）模块功能主要是为了加速雷达信号处理的特定任务。HWA模块在雷达系统中起到关键作用，以下是其主要功能和作用： 信号预处理： 滤波：对接收到的雷达信号进行滤波，…...

编程日记 2024/6/12 1:40:26

【Excel】Excel中将日期格式转换为文本格式，并按日期显示。

【问题需求】在使用excel进行数据导入的过程中， 有的软件要求日期列必须是文本格式。但是直接将日期列的格式改为文本后，显示一串数字，而不按日期显示。进而无法导入使用。【解决方法】使用【TXET】函数公式进行处理， 在单…...

编程日记 2024/6/12 1:39:25

物联网学习小记

https://www.cnblogs.com/senior-engineer/p/10045658.html GOSP: 提供类似Qt的API接口，仅需要几百KB的硬件资源（比Qt小的多），能运行在Qt不支持的低配置硬件上（对Qt生态形成补充），适用于嵌入式…...

编程日记 2024/6/12 1:38:24

代码随想录-Day29

491. 非递减子序列给你一个整数数组 nums ，找出并返回所有该数组中不同的递增子序列，递增子序列中至少有两个元素。你可以按任意顺序返回答案。数组中可能含有重复元素，如出现两个整数相等，也可以视作递增序列的一种特殊情…...

编程日记 2024/6/12 1:36:23

C/C++ 进阶（6）红黑树

个人主页：仍有未知等待探索-CSDN博客专题分栏：C 目录一、概念性质二、操作插入情况一：cur为红、p为红、g为黑，如果u存在且为红步骤： 情况二：cur为红、p为红、g为黑，如果u不存在或…...

编程日记 2024/6/12 1:34:21

【Vue】构建vuex-cart模块

说明：既然明确数据要存 vuex，建议分模块存，购物车数据存 cart 模块，将来还会有 user 模块，article 模块… 新建 store/modules/cart.js 挂载到 vuex 仓库上 store/cart.js import Vue from vue import Vuex from vu…...

编程日记 2024/6/12 1:33:20

如何成为嵌入式系统工程师？

各位朋友，如果你们有意向投身于嵌入式开发领域，那么强烈建议你们在软件和硬件两个方面均展开深入且全面的学习。嵌入式计算机作为嵌入式系统的核心技术支撑，其是直接面向用户、产品以及应用的，无论是软件还是硬件方面都能发挥重要…...

编程日记 2024/6/12 1:32:19

【AI大模型】Transformers大模型库（七）：单机多卡推理之device_map

目录一、引言二、单机多卡推理之device_map 2.1 概述 2.2 自动配置，如device_map"auto" 2.3 手动配置，如device_map"cuda:1" 三、总结一、引言这里的Transformers指的是huggingface开发的大模型库&#x…...

编程日记 2024/6/12 1:29:15

驱动代码编写（一）

驱动程序的作用驱动程序是指与硬件设备和操作系统进行通信的软件。它的主要功能有以下几个方面： 提供硬件支持：驱动程序允许操作系统与硬件设备进行通信，以便正确地操作和控制硬件设备。它可以向操作系统提供有关硬件设备的各种信息&#x…...

编程日记 2024/6/12 1:28:14

Prompt-to-Prompt Image Editing with Cross Attention Control

Prompt-to-Prompt Image Editing with Cross Attention Control (P2P) Amir Hertz, Tel Aviv University, ICLR23, Paper, Code 1. 前言编辑对这些生成模型来说是具有挑战性的，因为编辑技术的一个固有特性是保留大部分原始图像，而在基于文本的模型中…...

编程日记 2024/6/12 1:27:13

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/9/7 22:44:01

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/9/6 15:43:20

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日来简单学一下子来一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...

编程新知 2025/9/9 10:18:26

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...

编程新知 2025/8/4 22:42:24

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18