图片轮播学习

文章目录

  • 焦点轮播
  • 定时器用法
  • 使用定时器控制图片手/自动切换
  • 使用定时器控制轮播图片自动切换
  • 图片的滑动轮播

焦点轮播

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>焦点轮播</title>
<script type="text/javascript">function showP(Num){var fImg=document.getElementById("timg");var imgSrc="image/b";imgSrc=imgSrc+Num+".png";fImg.src=imgSrc;}
</script>
<style type="text/css">#box{border: 1px solid red;width:800px;height:400px;}ul{width:100px;height:15px;position:absolute;top:350px;left:350px;list-style: none;}li{display: inline-block;height:15px;width:15px;border-radius: 10px;background:#423F3F;border: 3px solid blue;}li:hover{background: #FFFFFF;}
</style>
</head><body>
<div id="box"><img src="image/b1.png" id="timg"/><ul><li onClick="showP(1)">1</li><li onClick="showP(2)">2</li><li onClick="showP(3)">3</li></ul>	
</div>
</body>
</html>

定时器用法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>定时器用法</title><style type="text/css">#ad{font-size: 32px;color: red;width: 100px;height: 100px;}</style></head><body><div id="ad"></div><script>var index=0;function changeIndex(){index++;if(index >2) index=0;document.getElementById("ad").innerHTML=index;/*innerHTML：这是一个属性，用于获取或设置元素的HTML内容。当你给innerHTML赋值时，它会替换元素内部的所有内容。*//*document.getElementById("ad")：这部分代码用于获取页面中ID为ad的元素。*/}setInterval(changeIndex,1000);/*setInterval函数被用来设置一个定时器，每隔1000毫秒（即1秒）调用一次changeIndex函数。*/</script></body>
</html>

使用定时器控制图片手/自动切换

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>使用定时器控制图片手自动切换</title><style type="text/css">#ad{width:800px;height:400px;background:url("image/b1.png");margin:0 auto;position:relative;}#leftbtn,#rightbtn{/*分别设置了左右按钮的位置。*/position:absolute;top:calc(50% - 20px);/*calc(50% - 20px)：calc是“calculate”的缩写，表示计算。这个函数允许你执行一个计算，以确定属性的值。 50%表示元素包含块（通常是父元素）高度的一半，而20px是一个固定的像素值。所以，calc(50% - 20px)的作用是将元素的顶部边缘放置在其包含块高度的一半减去20像素的位置。*/color: #fff;font-weight: bold;/*加粗*/font-size: 40px;cursor: pointer;/*是一个CSS属性，用于改变鼠标悬停在元素上时显示的光标样式。当这个属性应用到一个元素上时，鼠标指针会变成一个手形图标，这通常用来提示用户该元素是可点击的。*/}            #leftbtn{left:30px; }#rightbtn{right:30px; }</style></head><body><div id="ad"><div id="leftbtn">&lt;</div>   <!--&lt:符号--><div id="rightbtn">&gt;</div></div><script>var imgsURL=['image/b1.png','image/b2.png','image/b3.png'];var arrowLeft=document.getElementById("leftbtn");var arrowRight=document.getElementById("rightbtn");arrowLeft.addEventListener("click", preMove);/*addEventListener 方法用于在指定元素上附加一个事件监听器，当指定的事件发生时，事件监听器会被调用执行。*/arrowRight.addEventListener("click", nextMove);var index=0;function preMove(){index--;if(index <0) index=2; document.getElementById('ad').style. backgroundImage= 'url('+imgsURL[index]+')';}function nextMove(){index++;if(index >2) index=0; document.getElementById('ad').style. backgroundImage='url('+imgsURL[index]+')'; }setInterval(nextMove,2000);//每间隔1秒钟，调用nextMove函数换图</script></body>
</html>

使用定时器控制轮播图片自动切换

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>使用定时器控制轮播图片自动切换</title><style type="text/css">#ad{width:800px;height:450px;margin:0 auto;position:relative;overflow: hidden;/*用于设置当元素的内容超出其指定大小（宽度和高度）时如何处理溢出的内容。hidden 内容超出元素边界的部分会被隐藏。*/}#btm{position:absolute;bottom:0;width:100%;text-align:left;height: 50px;font-size: 32px;font-family: "microsoft yahei";background: rgba(0,0,0,0.5);color: #fff;}#pic{width: 800px;}</style></head><body><div id="ad"><img id="pic" src="image/b1.png" ><div id="btm">泰山</div></div><script type="text/javascript">var imgs=['image/b1.png','image/b2.png','image/b3.png'];var txts=['泰山','趵突泉','故宫'];var index=0;function changeImg(){document.getElementById('pic').src=imgs[index];document.getElementById('btm').innerHTML= txts[index];index++;if(index>2) index=0;}setInterval(changeImg,2000); </script></body>
</html>

图片的滑动轮播

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片的滑动轮播</title><style type="text/css">#box{position:relative;width:800px;height:400px;overflow: hidden;border: 1px solid;margin: 0 auto;}#multi-images {position:absolute;left:0;top:0;z-index: 1;width:100%;height:100%;font-size:0;white-space: nowrap;/*white-space: nowrap; 是 CSS 中的一个属性，用于控制元素内的空白字符的处理方式。当设置为 nowrap 时，它告诉浏览器不要在文本中插入换行，即使在文本的末尾或者在长单词中也是如此。这通常用于确保文本在一行内连续显示，而不会自动换行。在你提供的代码中，white-space: nowrap; 被应用在了 #multi-images 这个类上，这个类包含了轮播图的所有图片。这样做的目的是为了确保图片在轮播图容器内水平排列，而不会因为任何空白字符而换行。*/transition: 2s;/*表示当 CSS 属性值发生变化时，这个变化将在 1 秒内平滑过渡。*/}#multi-images img{width:100%;height: 100%;display: inline-block;                        }#multi-circles {position:absolute;right:30px;bottom:10px;z-index: 2;}#arrow-right,#arrow-left {font-weight: bold;font-size: 36px;position: absolute;top:calc(50% - 20px);height:40px;width:40px;border-radius:50%;/*变成圆形*/background:rgba(255,255,255,0.5);z-index: 3;color: #000;text-align: center;display:none;/* 当一个元素的 display 属性被设置为 none 时，该元素会被隐藏，不会在页面上占据任何空间*/cursor:pointer;}#box:hover #arrow-left,#box:hover #arrow-right{display: block;}/*悬浮在box上箭头会出现*/#arrow-right {right:10px;}#arrow-left {left:10px;}</style></head><body><div id="box"><div class="arrow-left" id="arrow-left">&lt;</div><div class="arrow-right" id="arrow-right">&gt;</div><ul id="multi-circles"><li></li><li></li><li></li><li></li></ul><div id="multi-images"><img src="image/b1.png"><img src="image/b2.png"><img src="image/b3.png"><img src="image/b2.png"></div> </div></body><script>var arrowLeft = document.getElementById("arrow-left");var arrowRight = document.getElementById("arrow-right");var multiImages = document.getElementById("multi-images");var circles = document.getElementById("multi-circles").getElementsByTagName("li");var box=document.getElementById("box");//为箭头和圆点绑定事件arrowLeft.addEventListener("click", preMove);arrowRight.addEventListener("click", nextMove);var currentIndex=0;var preIndex;for (var i = 0; i < circles.length; i++) {circles[i].setAttribute("id", i);circles[i].addEventListener("mouseenter", overCircle);/* 当鼠标悬停在圆点上时，执行的操作*/}//滑过圆点时执行的操作function overCircle() {preIndex=currentIndex;/*会一直变*/currentIndex = parseInt(this.id);moveImage();changeCircleColor(preIndex, currentIndex);      }//单击左箭头后执行的操作function preMove() {preIndex=currentIndex;currentIndex--;if (currentIndex < 0) {currentIndex = 3;}moveImage();changeCircleColor(preIndex, currentIndex);}//单击右箭头后执行的操作function nextMove() {preIndex=currentIndex;currentIndex++;if (currentIndex >= 4) {currentIndex = 0;}moveImage();changeCircleColor(preIndex, currentIndex);}function moveImage() {multiImages.style.left = -currentIndex * 900 + "px";}function changeCircleColor(preIndex,currentIndex) {circles[preIndex].style.color = "rgb(0, 0, 0)";circles[currentIndex].style.color = "rgb(255, 0, 0)";}var timer=setInterval(nextMove,1000);box.addEventListener("mouseover",function() {/*当鼠标悬停在轮播图容器上时，触发 mouseover 事件。*/clearInterval(timer);//清除定时器});box.addEventListener("mouseout",function() {/*当鼠标从轮播图容器移开时，触发 mouseout 事件。*/timer=setInterval(nextMove,1000);});</script>
</html>

源代码在资源

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

绘制地理空间矢量场

绘制地理空间矢量场

用 Folium 绘制地理空间矢量场 地学和许多应用领域中&#xff0c;数据的视觉化非常重要。尤其是一些表示方向和速度的矢量数据&#xff0c;例如风速、海流、车速等&#xff0c;使用矢量图进行绘制能够更加直观地表达这些数据的特性。 示例数据集选择 为了便于说明矢量场的绘…
阅读更多...
深度伪造检测（Deepfake Detection）：识别真假影像的关键技术

深度伪造检测（Deepfake Detection）：识别真假影像的关键技术

随着人工智能技术的进步&#xff0c;深度伪造&#xff08;Deepfake&#xff09;技术迅速发展。深度伪造利用深度学习技术生成高仿真的人脸、声音、影像&#xff0c;使得虚假内容可以几乎以假乱真。这一技术最早用于娱乐和广告领域&#xff0c;但逐渐被不良分子用于制造虚假信息…
阅读更多...
基于SSD模型的高压输电线障碍物检测系统，支持图像、视频和摄像实时检测【pytorch框架、python源码】

基于SSD模型的高压输电线障碍物检测系统，支持图像、视频和摄像实时检测【pytorch框架、python源码】

更多目标检测和图像分类识别项目可看我主页其他文章 功能演示&#xff1a; 基于SSD模型的高压输电线障碍物检测系统&#xff0c;支持图像、视频和摄像实时检测【python源码、pytorch框架】_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于SSD模型的高压输电线障碍物…
阅读更多...
大数据技术与应用专业教学体系如何无缝对接职业技能需求

大数据技术与应用专业教学体系如何无缝对接职业技能需求

针对高职院校大数据技术应用专业人才培养与行业需求对接中存在的岗位适应性不足等问题&#xff0c;结合教育部职业技能等级证书要求&#xff0c;本文深入分析了高职院校人才培养对接职业技能等级证书标准的必要性和可行性&#xff0c;并探索了面向岗位职业技能的专业课程体系重…
阅读更多...
OPC学习笔记

OPC学习笔记

一. 解决使用milo读取OPC设备字符串类型时&#xff0c;出现中文和特殊符号乱码的情况 解决前&#xff0c;读取字符串&#xff1a;你好 2. 解决后&#xff0c;读取字符串&#xff1a;你好 3. 解决前&#xff0c;读取字符串&#xff1a;165℃ 解决后&#xff0c;读取字符串&am…
阅读更多...
数据结构查找-B-树（C语言代码）

数据结构查找-B-树（C语言代码）

#include<stdio.h> #include<stdlib.h>typedef struct Node {int level;//树的阶数int keyNum;//关键字的数量int childNum;//孩子数量int* keys;//关键字数组struct Node** children;//孩子数组struct Node* parent;//父亲指针 }Node;//初始化 Node* initNode(int…
阅读更多...
网页web无插件播放器EasyPlayer.js播放器返回错误 Incorrect response MIME type 的解决方式

网页web无插件播放器EasyPlayer.js播放器返回错误 Incorrect response MIME type 的解决方式

在使用EasyPlayer.js播放器进行视频流播放时&#xff0c;尤其是在SpringBoot环境中部署静态资源时&#xff0c;可能会遇到“Incorrect response MIME type”的错误&#xff0c;这通常与WebAssembly&#xff08;WASM&#xff09;文件的MIME类型配置有关。 WASM是一种新的代码格式…
阅读更多...
[阻塞队列]

[阻塞队列]

目录 1. 阻塞队列 2. 阻塞队列的优点 (1) 实现服务器之间的"低耦合". (2) 实现"削峰填谷"的功能. 3. 阻塞队列代码举例 4. 自己实现阻塞队列 1. 阻塞队列 我们知道, 标准库中原有的队列Queue及其子类, 都是线程不安全的, 所以java封装了一个名为&quo…
阅读更多...
DCA-X 采样示波器

DCA-X 采样示波器

DCA-X 采样示波器 苏州新利通 | 综述 | DCA-X 宽带采样示波器属于我们的数字通信分析仪&#xff08;DCA&#xff09;系列。 这些示波器都是模块化平台&#xff0c;可对 50 Mb/s 到 224 Gb/s 的高速数字设计执行精准的测量。 您可以选择各种插入式模块来配置 DCA-X 主机&…
阅读更多...
将webserver部署到公网（使用阿里云服务器）

将webserver部署到公网（使用阿里云服务器）

阿里云轻量应用服务器介绍 这里我是用的是阿里云进行部署&#xff0c;阿里云推出的相关产品包括 云服务器 ECS 和轻量应用服务器。阿里云的指引和说明我觉得还是比较清楚详细的&#xff0c;适合新手。 先来介绍相关的一些名词&#xff1a; 云服务器 ECS&#xff08;Elastic …
阅读更多...
【JavaEE进阶】Spring 事务和事务传播机制

【JavaEE进阶】Spring 事务和事务传播机制

目录 1.事务回顾 1.1 什么是事务 1.2 为什么需要事务 1.3 事务的操作 2. Spring 中事务的实现 2.1 Spring 编程式事务(了解) 2.2 Spring声明式事务 Transactional 对比事务提交和回滚的日志 3. Transactional详解 3.1 rollbackFor 3.2 Transactional 注解什么时候会…
阅读更多...
Python 实现阿里滑块全攻略

Python 实现阿里滑块全攻略

阿里划块技术为开发者提供了高精度的视觉分割能力&#xff0c;而 Python 作为一种简洁高效的编程语言&#xff0c;可以轻松调用阿里划块接口&#xff0c;实现各种场景下的图像分割需求。 Python 调用阿里云分割抠图 - 商品分割接口的步骤如下&#xff1a;首先&#xff0c;开通…
阅读更多...
[ComfyUI]Flux:繁荣生态魔盒已开启,6款LORA已来,更有MJ6写实动漫风景艺术迪士尼全套

[ComfyUI]Flux:繁荣生态魔盒已开启,6款LORA已来,更有MJ6写实动漫风景艺术迪士尼全套

今天&#xff0c;我们将向您介绍一款非常实用的工具——[ComfyUI]Flux。这是一款基于Stable Diffusion的AI绘画工具&#xff0c;旨在为您提供一键式生成图像的便捷体验。无论您是AI绘画的新手还是专业人士&#xff0c;这个工具都能为您带来极大的便利。 在这个教程中&#xff…
阅读更多...
阿里云CDN稳定吗？

阿里云CDN稳定吗？

在互联网服务中&#xff0c;CDN&#xff08;内容分发网络&#xff09;扮演着至关重要的角色&#xff0c;它能够加速网站加载速度&#xff0c;提升用户体验。那么&#xff0c;作为市场上的领先者之一&#xff0c;阿里云的CDN到底稳定吗&#xff1f;九河云来和你说一说吧。 一、…
阅读更多...
Matlab实现鹈鹕优化算法（POA）求解路径规划问题

Matlab实现鹈鹕优化算法（POA）求解路径规划问题

目录 1.内容介绍 2.部分代码 3.实验结果 4.内容获取 1内容介绍 鹈鹕优化算法&#xff08;POA&#xff09;是一种受自然界鹈鹕捕食行为启发的优化算法。该算法通过模拟鹈鹕群体在寻找食物时的协作行为&#xff0c;如群飞、潜水和捕鱼等&#xff0c;来探索问题的最优解。POA因其…
阅读更多...
C++builder中的人工智能（22）：在C+++中读取WAV格式的音频文件

C++builder中的人工智能（22）：在C+++中读取WAV格式的音频文件

在这篇文章中&#xff0c;我们将探讨如何在C中读取WAV格式的音频文件。音频文件是计算机科学和编程中的一个重要组成部分&#xff0c;正确使用音频可以为娱乐应用程序增添乐趣&#xff0c;或者在业务应用程序中提醒用户重要事件或状态变化。在这篇文章中&#xff0c;我们将解释…
阅读更多...
.NET Core 应用程序如何在 Linux 中创建 Systemd 服务 ?

.NET Core 应用程序如何在 Linux 中创建 Systemd 服务 ?

.NET Core 和 Linux 已经成为一个强大的组合&#xff0c;为开发人员提供了一个灵活、高性能的平台来构建和运行应用程序。在 Linux 上部署 .NET Core 应用程序的一个关键方面是利用 systemd 服务来确保应用程序顺利运行&#xff0c;在开机时自动启动&#xff0c;并在失败后重新…
阅读更多...
@RestController 源码解读：解决 Web 开发中 REST 服务的疑难杂症

@RestController 源码解读：解决 Web 开发中 REST 服务的疑难杂症

目录 一、RestContrller注解 1.1 查看底层源码 1.2 AliasFor注解说明 1.2.1 注解别名 1.2.2 元数据别名 1.3 value() 方法的作用 一、RestContrller注解 1.1 查看底层源码 首先编写如下内容&#xff1a; RestController public class TestController {} 按住 Ctrl &am…
阅读更多...
vs2019托管调试助手 “ContextSwitchDeadlock“错误

vs2019托管调试助手 “ContextSwitchDeadlock“错误

错误描述 托管调试助手 "ContextSwitchDeadlock":“CLR 无法从 COM 上下文 0xd183e0 转换为 COM 上下文 0xd18328&#xff0c;这种状态已持续 60 秒。拥有目标上下文/单元的线程很有可能执行的是非泵式等待或者在不发送 Windows 消息的情况下处理一个运行时间非常长…
阅读更多...
H.264/H.265播放器EasyPlayer.js RTSP播放器关于webcodecs硬解码H265的问题

H.264/H.265播放器EasyPlayer.js RTSP播放器关于webcodecs硬解码H265的问题

EasyPlayer.js H5播放器&#xff0c;是一款能够同时支持HTTP、HTTP-FLV、HLS&#xff08;m3u8&#xff09;、WS视频直播与视频点播等多种协议&#xff0c;支持H.264、H.265、AAC、G711A、Mp3等多种音视频编码格式&#xff0c;支持MSE、WASM、WebCodec等多种解码方式&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023