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

js之简单轮播图

news 文章来源：https://blog.csdn.net/weixin_58462329/article/details/139609838 2025/1/14 0:57:13

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

<!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 首先&#xff0c;我在Gitlab上创建了一个远程仓库&#xff0c;用于演示使用Gitlab进行版本管理的完整流程&#xff1a; 1.将远端代码克隆到本…...

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

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

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

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

Ubuntu24.04记录网易邮箱大师的安装

邮箱大师下载 官网自行下载&#xff0c;下载后文件名“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编辑管理软件&#xff0c;支持创建、编辑、转换、签署和共享PDF文件。它具备OCR技术&#xff0c;可将扫描文档转换为可编辑文本&#xff0c;同时提供智能PDF处理技术&#xff0c;确保文件完整性和可读性。此外&#xff0c;软件还支持电子…...

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

Django UpdateView视图

UpdateView是Django中的一个通用视图&#xff0c;用于处理对象的更新操作。它允许用户更新一个已经存在的对象。UpdateView通常与一个模型表单一起使用&#xff0c;这样用户就可以看到当前对象的值&#xff0c;并可以修改它们。 1&#xff0c;添加视图 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面经&#xff08;全&#xff09; 公众号&#xff1a;阿Q技术站 文章目录 华为OD -- C面经&#xff08;全&#xff09;一面1、C结构体和类的区别&#xff0c;类默认的访问权限&#xff0c;结构体可以定义成员函数吗&#xff1f;2、多态的意义&#xff1f;多态的意义…...

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

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

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

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

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

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

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

HWA和BSS区别

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

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

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

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

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

物联网学习小记

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

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

代码随想录-Day29

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

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

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

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

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

【Vue】构建vuex-cart模块

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

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

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

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

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

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

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

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

驱动代码编写（一）

驱动程序的作用 驱动程序是指与硬件设备和操作系统进行通信的软件。它的主要功能有以下几个方面&#xff1a; 提供硬件支持&#xff1a;驱动程序允许操作系统与硬件设备进行通信&#xff0c;以便正确地操作和控制硬件设备。它可以向操作系统提供有关硬件设备的各种信息&#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. 前言 编辑对这些生成模型来说是具有挑战性的&#xff0c;因为编辑技术的一个固有特性是保留大部分原始图像&#xff0c;而在基于文本的模型中…...

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

实验11 OSPF协议配置

实验11 OSPF协议配置 一、OSPF单区域配置&#xff08;一&#xff09;原理描述&#xff08;二&#xff09;实验目的&#xff08;三&#xff09;实验内容&#xff08;四&#xff09;实验配置&#xff08;五&#xff09;实验步骤 二、OSPF多区域配置&#xff08;一&#xff09;原理…...

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

ChatGPT-4o, 腾讯元宝，通义千问对比测试中文文化

国内的大模型应用我选择了国内综合实力最强的两个&#xff0c;一个是腾讯元宝&#xff0c;一个是通义千问。其它的豆包&#xff0c;Kimi&#xff0c;文心一言等在某些领域也有强于竞品的表现。 问一个中文文化比较基础的问题,我满以为中文文化chatGPT不如国内的大模型。可事实…...

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

node.js学习

node.js学习实操及笔记 温故node.js&#xff0c;node.js学习实操过程及笔记~ node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记 为什么学node.js 可以让别人访问我们编写的网页为后续的框架学习打下基础&#xff0c;三大框架vue react angular离不开node.js …...

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

python将一个图片雕刻镂空成二维码

本文使用创作助手。 要将一个图片雕刻镂空成二维码&#xff0c;你可以使用Python中的Pillow库来处理图像&#xff0c;并使用qrcode库来生成二维码。以下是一个示例代码&#xff0c;用于将图片雕刻镂空成二维码&#xff1a; import qrcode from PIL import Image# 打开待处理的…...

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

OS进程取样器OS Process Sampler执行CMD/Shell命令

Apache JMeter - Users Manual: Component Reference 1.背景 项目上最近需要测试一种很少用到的DICOM协议，但是网上资料很少，基本上可以总结为三种方案： 直接发送TCP 16进制数据包，但是参数化数据准备难度大通过开发封装jar包发送，需要开发组提供通过发送cmd命令给前置机…...

编程日记 2024/6/12 1:18:03

excel两个数据表格，怎样实现筛选的联动？

如图&#xff0c;想要通过处理器或者像素条件进行筛选&#xff0c;形成一个右边图2的对比表&#xff0c;如何实现实现联动显示呢&#xff1f; 这个在excel里可以借用数据透视表切片器来完成。步骤如下&#xff1a; 1.添加表 选中数据区域中任意一个单元格&#xff0c;点击 插…...

编程日记 2024/6/12 1:17:02

python，django好的get和post请求

获得get请求 df request.GET.get("dades")获得post请求 文件settings.py关闭csrf MIDDLEWARE [ ‘django.middleware.security.SecurityMiddleware’, ‘django.contrib.sessions.middleware.SessionMiddleware’, ‘django.middleware.common.CommonMiddleware’…...

编程日记 2024/6/12 1:16:01

volatile的用法

目录 前言 使用volatile的注意事项&#xff1a; 示例&#xff1a; 总结&#xff1a; 前言 在嵌入式C编程中&#xff0c;volatile是一个关键字&#xff0c;它用于告知编译器被修饰的变量可能会在程序的任何地方、任何时候被不可预见的、非程序本身控制的因素所改变。这通常…...

编程日记 2024/6/12 1:11:56

MySQL 与 PostgreSQL 关键对比二（SQL语法）

目录 1 详细示例 1.1自动增量列 1.2 字符串连接 1.3 JSON 支持 2 总结 MySQL 和 PostgreSQL 是两种流行的开源关系数据库管理系统&#xff08;RDBMS&#xff09;。尽管它们在许多方面相似&#xff0c;但在 SQL 语法和功能上存在一些显著差异。 以下SQL语句的执行如果需要开…...

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

徐州服务器租用该如何维护？

服务器能够帮助企业处理网络上大部分的数据和信息&#xff0c;在互联网行业中起着十分重要的作用&#xff0c;服务器的存在能够保障网站稳定的运行&#xff0c;主要是由内存、硬盘和处理器等组成&#xff0c;服务器除了进行正常的工作运行&#xff0c;还需要定期维护和管理&…...

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

南京网站设计网站建设/武汉大学人民医院精神科

三、快速安装运行MySQL数据库 MySQL以前一直是开源免费的&#xff0c;被Oracle收购后有些变化&#xff1a;以前的版本都是免费的&#xff0c;社区版按GPL协议开源免费&#xff0c;商业版提供更加丰富的功能&#xff0c;但收费。 社区版的下载地址&#xff1a;https://dev.mys…...

编程日记 2025/1/13 22:08:39

南京在线网站制作/福建seo关键词优化外包

今天偶尔处理到了冷僻字这个问题。我们知道&#xff0c;在c中如果是这样一个string a"中国";那么它的长度就是4&#xff0c;也就是每个汉字占两个字节但是在c#中这样一个语句下来长度就变成了2&#xff0c;后来有人告诉我是因为存储编码的方式不同&#xff0c;我还没…...

编程日记 2025/1/13 21:15:13

网站名称注册/网站代理公司

前言 RHEL7使用了XFS文件系统&#xff0c;而非原来的Ext(Extended file system)。 文件系统 文件系统&#xff1a;是OS用作于明确存储设备(磁盘&#xff0c;固态硬盘)或分区上的文件的方法和数据结构&#xff1b;即在存储设备上组织文件的方法。OS中负责管理和存储文件信息的软…...

编程日记 2025/1/13 19:42:00

沈阳网站建设成创/东莞网站建设平台

shell脚本常用基础命令1 shell脚本常用基础命令shell脚本常用基础命令1一、diff 用法 &#xff08;一般作补丁,用补丁的方式更新脚本&#xff09;1.1参数a添加1.2 参数c更改1.3参数d删除1.4参数a和d的对比1.5参数b&#xff08;忽略空格&#xff09;1.6 参数B&#xff08;忽略空…...

编程日记 2025/1/13 18:43:19

幼儿园网站建设运行情况/最好的关键词排名优化软件

在说道主题前&#xff0c;先来啰嗦两句&#xff0c;o()︿︶)o 唉&#xff0c;不说两句心里就有个疙瘩&#xff0c;也许这就是所谓的强迫症吧&#xff0c;好了说说我想啰嗦的&#xff0c;其实也就是这样子的&#xff0c;关于Java开发工具箱的下载以及环境的配置。Java开发工具箱…...

编程日记 2025/1/13 18:04:48

南海网站建设/苏州seo网站公司

NginxLuaOpenResty安装1&#xff0c;安装依赖yum install libreadline-dev libncurses5-dev libpcre3-dev libssl-dev perl2,下载ngx_openresty-xxx.tar.gz并解压(ngx_openresty-xxx/bundle目录里存放着nginx核心和很多第三方模块&#xff0c;比如有我们需要的Lua和LuaJIT。)wg…...

编程日记 2025/1/13 17:41:48