jsjs原生 JavaScript轮播图 渐变淡入淡出

  下面是整体代码 复制即可使用，

<!DOCTYPE html>
<html lang="zn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页轮播图案例</title><script>window.addEventListener('load', function () {var box = document.querySelector('.box');var right = box.querySelector('.right');var left = box.querySelector('.left');var ul = box.querySelector('ul');var ul_lis = ul.querySelectorAll('li');var ol = box.querySelector('ol');var num = 0;var circle = 0;var flag = true;// 1.鼠标经过轮播图模块, 左右按钮显示, 离开隐藏左右按钮。box.addEventListener('mouseenter', function () {right.style.display = 'block';left.style.display = 'block';clearInterval(timer);timer = null;});box.addEventListener('mouseleave', function () {right.style.display = 'none';left.style.display = 'none';timer = setInterval(function () {right.click();}, 2000);});var timer = setInterval(function () {right.click();}, 2000);//2.动态生成小圆圈 for (var i = 0; i < ul_lis.length; i++) {var li = document.createElement('li');li.className = 'current';li.setAttribute('index', i);ol.appendChild(li);//添加注册事件  排他思想li.addEventListener('click', function () {for (var i = 0; i < ol.children.length; i++) {ul_lis[i].style.opacity = '0';//排他思想：全部图片设置为透明ol.children[i].className = 'current';}this.className = 'current white';var index = this.getAttribute('index');ul_lis[index].style.opacity = '1';//留下需要显示的图片num = index;circle = index;});}ol.children[0].className = 'current white';//TRUE 深拷贝 复制内容且复制标签var first = ul.children[0].cloneNode(true);ul.appendChild(first);// 2.点击右侧按钮一 次, 图片往左播放一张, 以此类推, 左侧按钮同理。right.addEventListener('click', function () {if (flag) {flag = false;if (num == ul.children.length - 1) {num = 0;}num++;if (num == 4) { num = 0; }for (var i = 0; i < ol.children.length; i++) {ul_lis[i].style.opacity = '0';}ul_lis[num].style.opacity = '1';flag = true;//变量控制小圆圈的变化circle++;if (circle == ol.children.length) {circle = 0;}circlechange();}});function circlechange() {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = 'current';}ol.children[circle].className = 'current white';};left.addEventListener('click', function () {if (flag) {flag = false;//实现无缝滚动if (num == 0) {num = ul.children.length - 1;}num--;if (num == -1) { num = 4; }for (var i = 0; i < ol.children.length; i++) {ul_lis[i].style.opacity = '0';}ul_lis[num].style.opacity = '1';flag = true;//一次只执行完毕才可以点击下一次//变量控制小圆圈的变化circle--;if (circle < 0) {circle = ol.children.length - 1;}circlechange();}});});</script><style>* {margin: 0px;padding: 0px;list-style: none;}.box {position: relative;width: 810px;height: 540px;left: 50%;transform: translateX(-50%);}img {width: 810px;height: 540px;}ul li {position: absolute;top: 0px;left: 0px;opacity: 0;transition: 1s;}ul li:first-child {opacity: 1;}ul {width: 100%;position: absolute;top: 0px;left: 0px;}span {width: 20px;height: 40px;font-size: 25px;line-height: 40px;display: block;position: absolute;color: black;background-color: #ccc;opacity: .5;text-align: center;top: 50%;transform: translateY(-50%);cursor: pointer;display: none;}.right {right: 0px;}.left {left: 0px;}ol {position: absolute;left: 50%;z-index: 999;transform: translateX(-50%);bottom: 5px;}.current {float: left;display: block;width: 25px;height: 5px;background-color: rgb(41, 39, 39);margin-right: 10px;opacity: 0.5;}.white {background-color: #fff;}</style>
</head><body><div class="box"><ul><li><img src="../img/1.jpg" alt=""></li><li><img src="../img/2.jpg" alt=""></li><li><img src="../img/3.jpg" alt=""></li><li><img src="../img/4.jpg" alt=""></li></ul><span class="right"> &gt; </span><span class="left"> &lt; </span><ol></ol></div></body></html>

常见的轮播图有两种：移动距离轮播图，渐变切换轮播图但是轮播图的代码都是差不太多的。这里就是给大家讲解的是渐变轮播图的切换，

这个是对轮播图的上下左右进行隐藏

 box（装整个轮播图的盒子）获得焦点的时候按钮style.display属性改为block失去焦点none。

 //获取焦点显示
box.addEventListener('mouseenter', function () {right.style.display = 'block';left.style.display = 'block';});//失去焦点隐藏
box.addEventListener('mouseleave', function () {right.style.display = 'none';left.style.display = 'none';});

添加圆点

 图片的数量动态生成小圆圈的数量，实现灵活控制。根据ul里的li的长度得到小圆圈的数量。

 for (var i = 0; i < ul_lis.length; i++) {var li = document.createElement('li');li.className = 'current';//current类是样式ol.appendChild(li);//添加注册事件  排他思想li.addEventListener('click', function () {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = 'current';}this.className = 'current white';var index = this.getAttribute('index');num = index;circle = index;});}ol.children[0].className = 'current white';//默认第一个为白色底

给左右添加

给ol添加一个index属性，以便于获取当前属于第几张图片（ol 和 ul 里面的 li 数量是一致的）。给左按钮添加一个点击事件，根据num（num由index赋值过来）跳转下一张图；设置flag（节流阀）保证是一次跳转完成之后才可以实现下一次的跳转。

 //TRUE 深拷贝 复制内容且复制标签var first = ul.children[0].cloneNode(true);ul.appendChild(first);// 2.点击右侧按钮一 次, 图片往左播放一张, 以此类推, 左侧按钮同理。right.addEventListener('click', function () {if (flag) {flag = false;if (num == ul.children.length - 1) {num = 0;}num++;if (num == 4) { num = 0; }for (var i = 0; i < ol.children.length; i++) {ul_lis[i].style.opacity = '0';}ul_lis[num].style.opacity = '1';flag = true;//变量控制小圆圈的变化circle++;if (circle == ol.children.length) {circle = 0;}circlechange();}});left.addEventListener('click', function () {if (flag) {flag = false;//实现无缝滚动if (num == 0) {num = ul.children.length - 1;}num--;if (num == -1) { num = 4; }for (var i = 0; i < ol.children.length; i++) {ul_lis[i].style.opacity = '0';}ul_lis[num].style.opacity = '1';flag = true;//一次只执行完毕才可以点击下一次//变量控制小圆圈的变化circle--;if (circle < 0) {circle = ol.children.length - 1;}circlechange();}});});function circlechange() {for (var i = 0; i < ol.children.length; i++) {ol.children[i].className = 'current';}ol.children[circle].className = 'current white';};

最后一步就是 实现自动轮播啦 

box.addEventListener('mouseenter', function () {clearInterval(timer);timer = null;});
box.addEventListener('mouseleave', function () {timer = setInterval(function () {right.click();}, 2000);});
var timer = setInterval(function () {right.click();}, 2000);

 

 

 

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

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

相关文章

php array_diff 比较两个数组bug避坑 深入了解

php array_diff 比较两个数组bug避坑 深入了解

今天实用array_diff出现的异常问题&#xff0c;预想的结果应该是返回 "integral_initiate">"0"&#xff0c;实际没有 先看测试代码&#xff1a; $a ["user_name">"测","see_num">0,"integral_initiate&quo…
阅读更多...
【Spring之手写一个依赖注入容器】

【Spring之手写一个依赖注入容器】

Spring之手写一个依赖注入容器 1. 创建两个自定义注解1.1 Component注解1.2 DI注解 2. ApplicationContext接口与实现类2.1 ApplicationContext 接口2.2 实现类&#xff1a;DefaultListableApplicationContext 3. 定义DAO层和Service层及其实现4. 定义异常信息类4.1 InjectBean…
阅读更多...
ETL概念

ETL概念

ETL ETLELT 技术原理ETL 模式应用场景常见工具ETL未来发展方向 ETL 在BI项目中ETL会花掉整个项目至少1/3的时间&#xff0c; ETL设计的好坏直接关接到BI项目的成败。ETL(Extract-Transform-Load) : 用来描述将数据从来源端经过抽取&#xff08;extract&#xff09;、转换&…
阅读更多...
深入理解Rust引用与借用

深入理解Rust引用与借用

文章目录 一、概述二、引用与解引用三、不可变引用四、可变引用4.1、可变引用同时只能存在一个4.2、可变引用与不可变引用不能同时存在4.3、悬垂引用&#xff08;Dangling References&#xff09; 团队博客: 汽车电子社区 一、概述 获取变量的引用&#xff0c;称之为借用(borro…
阅读更多...
day3：基于UDP模型的简单文件下载

day3：基于UDP模型的简单文件下载

思维导图 tftp文件下载客户端实现 #include <head.h> #define SER_PORT 69 #define SER_IP "192.168.125.223" int link_file() {int sfdsocket(AF_INET,SOCK_DGRAM,0);if(sfd-1){perror("socket error");return -1;}return sfd; } int filedownloa…
阅读更多...
智慧校园大数据应用系统介（3）

智慧校园大数据应用系统介（3）

智能巡课系统 巡课系统是一种新的课堂观察记录工具，它将学校或区域内全体教师作为一个整体，采用数字化手段描述教师和学生的课堂行为。通过移动端实时记录和通用性的统计分析，使教育者更容易发现教学过程与教学成果之间的联系，有助于改变课堂生态、提高教学有效性、提升教…
阅读更多...
《剑指 Offer》专项突破版 - 面试题 18、19 和 20 - 详解回文字符串（C++ 实现）

《剑指 Offer》专项突破版 - 面试题 18、19 和 20 - 详解回文字符串（C++ 实现）

目录 前言 面试题 18 : 有效的回文 面试题 19 : 最多删除一个字符得到回文 面试题 20 : 回文子字符串的个数 前言 回文是一类特殊的字符串。不管是从头到尾读取一个回文&#xff0c;还是颠倒过来从尾到头读取一个回文&#xff0c;得到的内容是一样的。 英语中有很多回文单…
阅读更多...
【WPF.NET开发】以编程方式打印XPS文件

【WPF.NET开发】以编程方式打印XPS文件

本文内容 可以使用 AddJob 方法的一个重载来打印 XML 纸张规范 (XPS) 文件&#xff0c;而根本无需打开 PrintDialog 或任何用户界面 (UI)&#xff08;从原理上讲&#xff09;。 还还可以使用多种 XpsDocumentWriter.Write 和 XpsDocumentWriter.WriteAsync 方法打印 XPS 文件…
阅读更多...
04--JdbcTemplate模版

04--JdbcTemplate模版

1、JdbcTemplate模版 1.1 概述 Spring JDBC Spring框架对JDBC的简单封装。提供了一个JdbcTemplate对象简化JDBC的开发&#xff08;后面专门讲spring框架) 1.2 实现步骤 1. 导入jar包 4 1 2. 创建JdbcTemplate对象。依赖于数据源DataSource JdbcTemplate template new JdbcTe…
阅读更多...
【论文阅读 SIGMOD18】Query-based Workload Forecasting for Self-Driving

【论文阅读 SIGMOD18】Query-based Workload Forecasting for Self-Driving

Query-based Workload Forecasting for Self-Driving Database Management Systems My Summary ABSTRACT Autonomous DBMS的第一步就是能够建模并预测工作负载&#xff0c;以前的预测技术对查询的资源利用率进行建模。然而&#xff0c;当数据库的物理设计和硬件资源发生变化…
阅读更多...
Windows如何部署TortoiseSVN客户端

Windows如何部署TortoiseSVN客户端

文章目录 前言1. TortoiseSVN 客户端下载安装2. 创建检出文件夹3. 创建与提交文件4. 公网访问测试 前言 TortoiseSVN是一个开源的版本控制系统&#xff0c;它与Apache Subversion&#xff08;SVN&#xff09;集成在一起&#xff0c;提供了一个用户友好的界面&#xff0c;方便用…
阅读更多...
Spring第六天(注解开发第三方Bean)

Spring第六天(注解开发第三方Bean)

注解开发管理第三方Bean 显然&#xff0c;我们无法在第三方Bean中写入诸如service这样的注解&#xff0c;所以&#xff0c;Spring为我们提供了Bean这一注解来让我们通过注解管理第三方Bean 第二种导入方式由于可读性太低&#xff0c;故只介绍第一种导入方式&#xff0c;这里我…
阅读更多...
自动化工具实践操作-注入自定义代码

自动化工具实践操作-注入自定义代码

功能 采集掘金左边每个tab下文章的标题。人为操作就是点击一个tab&#xff0c;复制文字标题&#xff0c;重复以上操作。根据这个&#xff0c;我们可以转换成自己的代码 开始设计 如上文操作基本一致。新建任务、设计点击事件如出一辙。 自定义循环事件 操作循环节点&#…
阅读更多...
R语言【cli】——ansi_has_any()：检查字符串里是否存在ANSI格式

R语言【cli】——ansi_has_any()：检查字符串里是否存在ANSI格式

Package cli version 3.6.0 Usage ansi_has_any(string, sgr TRUE, csi TRUE, link TRUE) Arguments 参数【string】&#xff1a;要检查的字符串。它也可以是字符向量 参数【sgr】&#xff1a;是否查找SGR(样式化)控制序列。 参数【csi】&#xff1a;是否查找非sgr控制序…
阅读更多...
ubuntu下常见查看库信息的指令

ubuntu下常见查看库信息的指令

要查看共享库&#xff08;例如 liblog4cplus.so&#xff09;的信息&#xff0c;可以使用一些工具来获取有关库的详细信息。以下是一些常用的方法&#xff1a; 1. 使用 nm 命令&#xff1a; nm 命令用于显示目标文件或共享库的符号表。你可以运行以下命令查看 liblog4cplus.so…
阅读更多...
Mysql：重点且常用的操作和理论知识整理 ^_^

Mysql：重点且常用的操作和理论知识整理 ^_^

目录 1 基础的命令操作 2 DDL 数据库定义语言 2.1 数据库操作 2.2 数据表操作 2.2.1 创建数据表 2.2.2 修改和删除数据表 2.2.3 添加外键 3 DML 数据库操作语言 3.1 插入语句(INSERT) 3.2 修改语句(UPDATE) 3.3 删除语句 3.3.1 DELETE命令 3.3.2 TRUNCATE命令 4 …
阅读更多...
第1周：Day 3 - PyTorch与TensorFlow的异同介绍（入门级）

第1周：Day 3 - PyTorch与TensorFlow的异同介绍（入门级）

第1周&#xff1a;Day 3 - PyTorch介绍 学习目标 理解PyTorch的基本概念和主要特点。 成功安装PyTorch环境。 PyTorch简介 PyTorch 是一个开源的机器学习库&#xff0c;广泛用于计算机视觉和自然语言处理等领域。 它由Facebook的人工智能研究团队开发&#xff0c;提供了丰富的A…
阅读更多...
idea中使用git提交代码报 Nothing To commit No changes detected

idea中使用git提交代码报 Nothing To commit No changes detected

问题描述 在idea中右键&#xff0c;开始将变更的代码进行提交的时候&#xff0c;【Commit Directory】点击提交的时候 报 Nothing To commit No changes detected解决方案 在这里点击Test 看看是不是能下面显示git版本&#xff0c;不行的话 会显示一个 fix的字样&#xff0c;行…
阅读更多...
【日常聊聊】边缘计算的挑战和机遇

【日常聊聊】边缘计算的挑战和机遇

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a; 日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 边缘计算的挑战和机遇 一&#xff1a;数据安全与隐私保护 二&#xff1a;网络稳定性与可靠性 三&#xff1a;实时性与性能优…
阅读更多...
Unity中的协程

Unity中的协程

定义&#xff1a;协程使得任务的执行可以分配到多个帧中完成&#xff0c;在Unity中&#xff0c;协程从开始执行到第一个yield return 语句后将调用权归还Unity主线程&#xff0c;并在紧随的下一帧继续从上次结束调用的代码上下文位置恢复执行。 常见应用场景&#xff1a;HTTP请…
阅读更多...
最新文章

Copyright @ 2022~2023