(一)原生js案例之图片轮播

原生js实现的两种播放效果

效果一

循环播放,单一的效果
请添加图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片切换</title><style>*{padding: 0;margin: 0;}#content{width: 400px;height: 400px;border: 1px solid #000;margin: 50px auto;position: relative;background-color: aliceblue;}#content a{width: 40px;height: 40px;background-color: #000;border: 5px solid #fff;position: absolute;top: 175px;text-decoration: none;line-height: 40px;text-align: center;color: #fff;filter: opacity(50);opacity: 0.5;}#content a:hover{filter: opacity(100);opacity: 1;}#prev{left: 10px;}#next{ right: 10px;}#desc,#num{position: absolute;left: 0;width: 100%;height: 30px;line-height: 30px;box-sizing: border-box;background-color: #000;color: #fff;filter: opacity(50);opacity: 0.5;padding: 0 10px;}#desc{bottom: 0;}#img{width: 400px;height: 400px;}#num{filter: opacity(.9);opacity: 90;text-align: center;}</style><script>window.onload = function () {const oPrev = document.getElementById('prev');const oNext = document.getElementById('next');const oImg = document.getElementsByTagName('img')[0];const oDesc = document.getElementById('desc');const oNum = document.getElementById('num');const oImgs = ['images/img1.png', 'images/img2.png', 'images/img3.png', 'images/img4.png'];const oText = ["这是第一张图片", "这是第二张图片", "这是第三张图片", "这是第四张图片"]let num = 0;tabChange()oPrev.addEventListener('click', function(){num--if(num < 0){num = oImgs.length-1;}tabChange()})oNext.addEventListener('click', function(){num++if(num == oImgs.length){num = 0;}tabChange()})function tabChange(){//计算图片数量oNum.innerHTML = num+1 + "/" + oImgs.length;oImg.src = oImgs[num];oDesc.innerHTML = oText[num];}}</script>
</head>
<body><div id="content"><a id="prev" href="javascript:;"><</a><img id="img" alt=""><p id="desc">图片文字加载中...</p><span id="num">正在计算中...</span><a id="next" href="javascript:;">></a></div>
</body>
</html>

效果二

可以控制是否轮播播放
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片切换</title><style>*{padding: 0;margin: 0;}#content{width: 400px;height: 400px;border: 1px solid #000;margin: 50px auto;position: relative;background-color: aliceblue;}#content a{width: 40px;height: 40px;background-color: #000;border: 5px solid #fff;position: absolute;top: 175px;text-decoration: none;line-height: 40px;text-align: center;color: #fff;filter: opacity(50);opacity: 0.5;}#content a:hover{filter: opacity(100);opacity: 1;}#prev{left: 10px;}#next{ right: 10px;}#desc,#num{position: absolute;left: 0;width: 100%;height: 30px;line-height: 30px;box-sizing: border-box;background-color: #000;color: #fff;filter: opacity(50);opacity: 0.5;padding: 0 10px;}#desc{bottom: 0;}#img{width: 400px;height: 400px;}#num{filter: opacity(.9);opacity: 90;text-align: center;}.tool{text-align: center;}</style><script>window.onload = function () {const oPrev = document.getElementById('prev');const oNext = document.getElementById('next');const oImg = document.getElementsByTagName('img')[0];const oDesc = document.getElementById('desc');const oNum = document.getElementById('num');const oLoop = document.getElementById('loop');const oStop = document.getElementById('stop');const oImgs = ['images/img1.png', 'images/img2.png', 'images/img3.png', 'images/img4.png'];const oText = ["这是第一张图片", "这是第二张图片", "这是第三张图片", "这是第四张图片"]let num = 0;let isLoop = true;oLoop.addEventListener('click', function(){isLoop = true;})oStop.addEventListener('click', function(){isLoop = false;})tabChange()oPrev.addEventListener('click', function(){num--if(num < 0){if(isLoop){num = oImgs.length-1;}else{alert("没有上一页了")num = 0;return false;}}tabChange()})oNext.addEventListener('click', function(){num++if(num == oImgs.length){if(isLoop){num = 0;}else{alert("没有下一页了")num = oImgs.length-1;return false;}}tabChange()})function tabChange(){//计算图片数量oNum.innerHTML = num+1 + "/" + oImgs.length;oImg.src = oImgs[num];oDesc.innerHTML = oText[num];}}</script>
</head>
<body><div class="tool"><h1>图片切换</h1><button id="loop">循环切换</button><button id="stop">停止循环切换</button></div><div id="content"><a id="prev" href="javascript:;"><</a><img id="img" alt=""><p id="desc">图片文字加载中...</p><span id="num">正在计算中...</span><a id="next" href="javascript:;">></a></div>
</body>
</html>
···

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

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

相关文章

昇思学习打卡-20-生成式/GAN图像生成

文章目录 网络介绍生成器和判别器的博弈过程数据集可视化模型细节训练过程网络优缺点优点缺点 网络介绍 GAN通过设计生成模型和判别模型这两个模块&#xff0c;使其互相博弈学习产生了相当好的输出。 GAN模型的核心在于提出了通过对抗过程来估计生成模型这一全新框架。在这个…

RK3568笔记三十九:多个LED驱动开发测试(设备树)

若该文为原创文章&#xff0c;转载请注明原文出处。 通过设备树配置一个节点下两个子节点控制两个IO口&#xff0c;一个板载LED&#xff0c;一个外接LED。 一、介绍 通过学习设备树控制GPIO&#xff0c;发现有多种方式 一、直接通过寄存器控制 二、通过设备树&#xff0c;但…

基于STC89C52RC单片机的大棚温控系统(含文档、源码与proteus仿真,以及系统详细介绍)

本篇文章论述的是基于STC89C52RC单片机的大棚温控系统的详情介绍&#xff0c;如果对您有帮助的话&#xff0c;还请关注一下哦&#xff0c;如果有资源方面的需要可以联系我。 目录 摘要 原理图 仿真图 系统总体设计图 代码 系统论文 参考文献 资源下载 摘要 本文介绍的…

CSA笔记3-文件管理命令(补充)+vim+打包解包压缩解压缩命令

grep(-i -n -v -w) [rootxxx ~]# grep root anaconda-ks.cfg #匹配关键字所在的行 [rootxxx ~]# grep -i root anaconda-ks.cfg #-i 忽略大小写 [rootxxx ~]# grep -n root anaconda-ks.cfg #显示匹配到的行号 [rootxxx ~]# grep -v root anaconda-ks.cfg #-v 不匹配有…

甄选范文“论软件维护方法及其应用”软考高级论文,系统架构设计师论文

论文真题 软件维护是指在软件交付使用后,直至软件被淘汰的整个时间范围内,为了改正错误或满足 新的需求而修改软件的活动。在软件系统运行过程中,软件需要维护的原因是多种多样的, 根据维护的原因不同,可以将软件维护分为改正性维护、适应性维护、完善性维护和预防性 维护…

Linux 上 TTY 的起源

注&#xff1a;机翻&#xff0c;未校对。 What is a TTY on Linux? (and How to Use the tty Command) What does the tty command do? It prints the name of the terminal you’re using. TTY stands for “teletypewriter.” What’s the story behind the name of the co…

debian 实现离线批量安装软件包

前言 实现在线缓冲需要的软件和对应依赖的包&#xff0c;离线进行安装 &#xff0c;用于软件封装。 测试下载一个gcc和依赖环境&#xff0c;关闭默认在线源&#xff0c;测试离线安装gcc和依赖环境 兼容 debian ubuntu/test 测试下载安装包到目录 vim /repo_download.sh #!…

【数据结构】算法复杂度

算法复杂度 数据结构算法复杂度 大o渐进表示法空间复杂度 数据结构 数据结构&#xff1a;是计算机存储和组织数据的方式。 比如打开一个网页&#xff0c;我们看到的文字就是数据&#xff0c;这些数据需要用一个结构来把他管理起来&#xff0c;我们称之为&#xff1a;数据结构 …

基于springboot3实现单点登录(一): 单点登录及其相关概念介绍

引言 应网友要求&#xff0c;从本文开始我们将实现一套基于springboot3springsecurity的单点登录认证系统。 单点登录的实现方式有多种&#xff0c;接下来我们会以oauth2为例来介绍和实现。 单点登录介绍 单点登录&#xff08;Single Sign-On&#xff0c;简称SSO&#xff0…

nftables(7)集合(SETS)

简介 在nftables中&#xff0c;集合&#xff08;sets&#xff09;是一个非常有用的特性&#xff0c;它允许你以集合的形式管理IP地址、端口号等网络元素&#xff0c;从而简化规则的配置和管理。 nftables提供了两种类型的集合&#xff1a;匿名集合和命名集合。 匿名集合&…

使用base64通用文件上传

编写一个上传文件的组件 tuku,点击图片上传后使用FileReader异步读取文件的内容&#xff0c;读取完成后获得文件名和base64码&#xff0c;调用后端uploadApi,传入姓名和base64文件信息&#xff0c;后端存入nginx中&#xff0c;用于访问 tuku.ts组件代码&#xff1a; <templa…

系统测试-白盒测试学习

目录 1、语句覆盖法&#xff1a; 2、判定覆盖法&#xff1a; 3、条件覆盖法&#xff1a; 4、判定条件覆盖&#xff1a; 5、条件组合的覆盖&#xff1a; 6、路径覆盖&#xff1a; 黑盒&#xff1a;需求 白盒&#xff1a;主要用于单元测试 1、语句覆盖法&#xff1a; 程序…

OSU!题解(概率dp)

题目&#xff1a;OSU! - 洛谷 思路&#xff1a; 设E()表示截止到i所获得的分数&#xff1b; 对于到i点的每一个l&#xff0c;如果第i1点为1&#xff0c;那么会新增分数3*l^23*l1; 就有递推公式方程&#xff1a; E()E()p[i1]p*(3*l^23*l1);(p代表截止到i获得长度l的概率)&a…

怎样在 PostgreSQL 中优化对多表关联的连接条件选择?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 怎样在 PostgreSQL 中优化对多表关联的连接条件选择一、理解多表关联的基本概念二、选择合适的连接条件…

【C++】拷贝构造函数及析构函数

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…

dbeaver连接mysql8异常

部署了mysql8&#xff0c;尝试用dbeaver 24.1.2连接它。结果配置完成后测试连接时报错&#xff1a;Public Key Retrieval is not allowed. 按照提示修改驱动属性&#xff1a; allowPublicKeyRetrievaltrue

【BUG】已解决:ValueError: Expected 2D array, got 1D array instead

已解决&#xff1a;ValueError: Expected 2D array, got 1D array instead 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&#xff0c;就职于医疗科技公司&#xff0c;热衷分享知识&#xff0c;武汉…

Python | Leetcode Python题解之第238题除自身以外数组的乘积

题目&#xff1a; 题解&#xff1a; class Solution:def productExceptSelf(self, nums: List[int]) -> List[int]:length len(nums)# L 和 R 分别表示左右两侧的乘积列表L, R, answer [0]*length, [0]*length, [0]*length# L[i] 为索引 i 左侧所有元素的乘积# 对于索引为…

人工智能 (AI) 应用:一个异常肺呼吸声辅助诊断系统

关键词&#xff1a;深度学习、肺癌、多标签、轻量级模型设计、异常肺音、音频分类 近年来&#xff0c;流感对人类的危害不断增加&#xff0c;COVID-19疾病的迅速传播加剧了这一问题&#xff0c;导致大多数患者因呼吸系统异常而死亡。在这次流行病爆发之前&#xff0c;呼吸系统…

SCI一区级 | Matlab实现GJO-CNN-LSTM-Multihead-Attention多变量时间序列预测

SCI一区级 | Matlab实现GJO-CNN-LSTM-Mutilhead-Attention多变量时间序列预测 目录 SCI一区级 | Matlab实现GJO-CNN-LSTM-Mutilhead-Attention多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.Matlab实现GJO-CNN-LSTM-Mutilhead-Attention金豺优化算…