JS 轮播图点击左右切换

news2024/11/28 0:42:57

 点击左右按钮实现轮播图切换图片

style:

*{
        margin: 0;
        padding: 0;
        margin: auto;
    }
    #img1{
        width: 300px;
        height: 300px;
        position: relative;
    }
    #butto1{
        width: 50px;
        height: 100px;
        font-size: 50px;
        border: none;
        background-color: hsla(0, 0%, 0%, 0.2);
        position: absolute;
        top: 100px;
        left: 0px;
        color: aquamarine;
    }
    #butto2{
        width: 50px;
        height: 100px;
        font-size: 50px;
        border: none;
        background-color: hsla(0, 0%, 0%, 0.2);
        position: absolute;
        top: 100px;
        left: 250px;
        color: aquamarine;
    }

html:

<div>
        <img id="img1" src="https://d-ssl.dtstatic.com/uploads/blog/202402/01/V2SoD3v1HmgwjZ6.thumb.1000_0.jpg_webp" alt="">
        <button id="butto1"><</button>

        <button id="butto2">></button>
    </div>

style:

var imgss = document.getElementById("img1");
        var button1 = document.getElementById("butto1");
        var button2 = document.getElementById("butto2");
        var index = 0;
        var images = [
            "https://d-ssl.dtstatic.com/uploads/blog/202402/01/V2SoD3v1HmgwjZ6.thumb.1000_0.jpg_webp",
            "https://d-ssl.dtstatic.com/uploads/blog/202402/01/JOS3dXY9TWDA04e.thumb.1000_0.jpg_webp",
            "https://d-ssl.dtstatic.com/uploads/blog/202402/01/0GSP0XdvS0qgy3D.thumb.1000_0.jpg_webp",
            "https://d-ssl.dtstatic.com/uploads/blog/202402/01/N5SoxNdwHPypJ1p.thumb.1000_0.jpg_webp"
        ];

        button1.addEventListener("click", function () {
            index--;
            if (index < 0) {
                index = images.length - 1;
            }
            imgss.src = images[index];
        });

        button2.addEventListener("click", function () {
            index++;
            if (index >= images.length) {
                index = 0;
            }
            imgss.src = images[index];
        });

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1577957.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CS162 Operating System笔记

What is an Operating System? it’s typically a special layer of software that provides the application access to hardware resources.So.it’s convenient abs fractions of complex hardware devices.

DVWA-xss储存型及beef下载(kali)

beef下载 apt-get update apt-get install beef-xss 登录网址是 这里的ip为虚拟机的地址 之后会让你设置密码 如果密码和用户不知道在etc/beef-xss/config.yaml可以查看 这是偷cookie的就是代码 这里是可以修改的不修改的话代码是不全的 通过beef拿到了cookies之后在网页…

知名度最高的3款电脑监控软件

知名度最高的3款电脑监控软件 公司电脑监控软件是一种安装在员工电脑上的软件&#xff0c;主要用于监控和管理员工的电脑屏幕操作、网络行为以及文件操作等。这种软件有助于企业提高员工的工作效率&#xff0c;保护公司的数据安全&#xff0c;并维护公司的IT健康环境。 市面有…

Seatunnel和web快速安装详解

目录 版本声明下载地址seatunnel下载seatunnel-web下载 安装seatunnel上传压缩包解压配置环境变量下载JAR包测试功能启动服务 安装seatunnel-web解压安装包初始化数据库修改数据连接配置文件配置Client信息配置支持的插件信息配置JAR包配置数据源JAR包配置datasource开头的jar包…

Leetcode 第 390 场周赛题解

Leetcode 第 390 场周赛题解 Leetcode 第 390 场周赛题解题目1&#xff1a;3090. 每个字符最多出现两次的最长子字符串思路代码复杂度分析 题目2&#xff1a;3091. 执行操作使数据元素之和大于等于 K思路代码复杂度分析 题目3&#xff1a;3092. 最高频率的 ID思路代码复杂度分析…

nginx支持的多种负载均衡策略

目录 1.轮询&#xff08;默认&#xff09; 2. ip_hash 3. 加权轮询&#xff08;weight&#xff09; 4. fair&#xff08;第三方&#xff09; 5. 最少连接&#xff08;least_conn&#xff09; 1.轮询&#xff08;默认&#xff09; 将请求依次分配给每个服务器&#xff0c;确…

嵌入式工控机:提升工业生产线智能化水平

工业4.0和智能制造的发展&#xff0c;嵌入式工控机在自动化生产线中的角色日益凸显。它作为一种高度集成且适用于严苛工业环境的专用计算机&#xff0c;凭借其强大的数据处理能力和实时控制特性&#xff0c;正逐步成为现代工业生产线的协调器和核心控制器。 嵌入式工控机能够实…

人工智能的前景发展和可能产生的职业影响

人工智能作为科技创新的关键领域和数字经济时代的重要支柱&#xff0c;其发展前景广阔&#xff0c;未来的就业前景也备受关注。以下是对人工智能格局未来就业前景的展望&#xff1a; 首先&#xff0c;随着技术的不断进步和应用场景的拓展&#xff0c;人工智能行业对人才的需求将…

12_Spring-AOP

文章目录 动态代理原理AOPAOP和OOPAOP的特点AOP的应用场景AOP的编程术语AOP的实现SpringAOPAspectJ切面组件切入点表达式AspectJ切面JoinPoint连接点 机制 动态代理原理 AOP Aspect Oriented Programming面向切面编程&#xff0c;是指通过预编译方式和运行期动态代理实现程序功…

目标检测——RCNN系列学习(一)

前置知识 包括&#xff1a;非极大值抑制&#xff08;NMS&#xff09;、selective search等 RCNN [1311.2524] Rich feature hierarchies for accurate object detection and semantic segmentation (arxiv.org)https://arxiv.org/abs/1311.2524 1.网络训练 2.推理流程 3.总…

【C++ STL算法】sort 排序

文章目录 【 1. 基本原理 】【 2. sort 的应用 】实例 - sort 函数实现 升序排序和降序排序 函数名用法sort (first, last)基于 快速排序&#xff0c;对容器或普通数组中 [ first, last ) 范围内的元素进行排序&#xff0c;默认进行升序排序&#xff08;从小到大&#xff09;。…

vscode-tasks.json自定义任务

以下所有内容,参考自VScode官方文档: vscode_tasks-docs任务说明文档vscode_variables-reference-docs变量说明文档vscode addtional docs for tasksvscode launch.json 属性设置文档,(下文没有介绍,没有涉及) 浅浅记录一下个人对vscode任务(task)的理解,还谈不上使用. 文章目…

TouchGFX之时钟

代码 #ifndef TOUCHGFX_ABSTRACTCLOCK_HPP #define TOUCHGFX_ABSTRACTCLOCK_HPP #include <touchgfx/containers/Container.hpp> #include <touchgfx/hal/Types.hpp>namespace touchgfx { class AbstractClock : public Container { public:AbstractClock();/* 设…

【IMU系列】什么是传感器的ODR和FSR实际如何配置传感器

使用更高的ODR信号有两个主要缺点&#xff1a;内存限制和功耗 以实际传感器为例

Redis分布式锁误删情况说明

4.4 Redis分布式锁误删情况说明 逻辑说明&#xff1a; 持有锁的线程在锁的内部出现了阻塞&#xff0c;导致他的锁自动释放&#xff0c;这时其他线程&#xff0c;线程2来尝试获得锁&#xff0c;就拿到了这把锁&#xff0c;然后线程2在持有锁执行过程中&#xff0c;线程1反应过…

成都正信晟锦:借了钱不还怎么起诉对方

在民间借贷中&#xff0c;遇到对方借钱不还的情况时&#xff0c;可以依法通过起诉的方式解决纠纷。首先&#xff0c;债权人应与债务人进行沟通&#xff0c;尝试和解。如果协商无果&#xff0c;则需收集证据&#xff0c;包括但不限于借条、转账记录、双方通讯记录等&#xff0c;…

mysql忘记密码如何重置

错误截图 解决方法 1. 关闭mysql服务器 net stop mysql服务名 2. 查找mysql安装路径中bin目录路径 3. cmd 打开该目录 4. 在my.ini所在的目录&#xff0c;新建一个init_pwd.txt文件。文件内容如下 ALTER user rootlocalhost identified by 密码; 5. 在第四步打开的cmd中 输…

vscode的基本使用(简洁版)

1.Vscode配置C/C开发环境 1.1 下载编译器 MinGW-w64 - for 32 and 64 bit Windows - Browse Files at SourceForge.net 下载并解压 -> 放到电脑C盘的根目录下 1.2 配置环境变量 1.3 安装C/C插件 2. 在VScode上编写C语言代码并编译成功 在vscode中写代码时,需要将代码放在…

在Idea里,执行npm命令 : 无法加载文件 ***\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 往期热门专栏回顾 专栏…

重建大师进行扫码认证了,接下来怎样才能正常使用?(如下图)

重建大师软件授权已经有了后&#xff0c;新建工程后设置任务目录和监控目录一致就可以运行了。 重建大师是一款专为超大规模实景三维数据生产而设计的集群并行处理软件&#xff0c;输入倾斜照片&#xff0c;激光点云&#xff0c;POS信息及像控点&#xff0c;输出高精度彩色网格…