JS:轮播图终极版

轮播图:可触发效果

:1、按箭头符号可左右切换图片

2、到最后一张的下一张是开头第一张;开头第一张的前一张是最后一张

3、鼠标放在轮播图上时轮播图停止定时器;鼠标移开定时器继续开启

注意:图片需要自己准备且对应

部分HTML代码:

<!DOCTYPE html>
<html lang="en"><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><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./imgs/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了?</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 需求:当点击左边的按钮可以切换轮播图// 分析:右侧按钮点击,变量++;如果大于等于8则复原0;// 左侧按钮点击,变量--;如果小于0则复原最后一张// 鼠标经过暂停定时器,鼠标离开开始定时器// 1. 初始数据const sliderData = [{ url: './imgs/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },{ url: './imgs/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },{ url: './imgs/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },{ url: './imgs/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './imgs/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './imgs/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './imgs/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },{ url: './imgs/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },]</script>
</body></html>

JavaScript代码:

 // 获取p元素const p = document.querySelector('.slider-footer p')//获取footerconst footer = document.querySelector('.slider-footer')// 获取右边按钮const next = document.querySelector('.next')// 获取左边按钮const prev = document.querySelector('.prev')let i = 0// while (true) {//渲染对应的数据function move(i) {img.src = sliderData[i].urlp.innerHTML = sliderData[i].title// 获取元素footer.style.backgroundColor = sliderData[i].color// 先删掉之前的activedocument.querySelector('.slider-indicator .active').classList.remove('active')//  只让当前的litianjia activedocument.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')}//定时器函数function timer() {}next.addEventListener('click', function () {// if (i >= 8)//   i = 0// i++i++i = i >= sliderData.length - 1 ? 0 : i// 调用渲染函数move(i)})prev.addEventListener('click', function () {// if (i < 0)//   i = 7i--i = i < 0 ? sliderData.length - 1 : i// 调用渲染函数move(i)})// }// 记录定时器idlet timeId = 0// 自动播放timeId = setInterval(function () {// 利用js自动调用点击事件next.click()}, 1000)document.querySelector('.slider').addEventListener('mouseenter', function () {// 停止定时器clearInterval(timeId)})//鼠标移开开启定时器document.querySelector('.slider').addEventListener('mouseleave', function () {timeId = setInterval(function () {// 利用js自动调用点击事件next.click()}, 1000)})

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

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

相关文章

Lua中文语言编程源码-第三节,更改lualib.h Lua标准库, 使Lua支持中文关键词(与所有的基础库相关)

源码已经更新在CSDN的码库里&#xff1a; git clone https://gitcode.com/funsion/CLua.git 在src文件夹下的lualib.h&#xff0c;是Lua的标准库模块。 Lua标准库一共有有个10个库&#xff0c;base, 基本用不着改&#xff0c;所以没加中文名称。 函数声明宏名英文库名中文库…

51单片机-AT24C02(I2C总线)

目录 一&#xff0c;介绍及元件工作原理 7.时序结构&#xff08;重要&#xff09; 8.i2C总线数据帧&#xff08;重要&#xff09; 二&#xff0c;应用 一&#xff0c;介绍及元件工作原理 1.元件介绍 2.存储器 3.地址总线和数据总线 地址总线只能一次选中一行 4.引脚及应用…

一起学数据分析_2

写在前面&#xff1a;代码运行环境为jupyter&#xff0c;如果结果显示不出来的地方就加一个print()函数。 一、数据基本处理 缺失值处理&#xff1a; import numpy as np import pandas as pd#加载数据train.csv df pd.read_csv(train_chinese.csv) df.head()# 查看数据基本…

05.BOM对象

一、js组成 JavaScript的组成 ECMAScript: 规定了js基础语法核心知识。比如&#xff1a;变量、分支语句、循环语句、对象等等 Web APIs : DOM 文档对象模型&#xff0c; 定义了一套操作HTML文档的APIBOM 浏览器对象模型&#xff0c;定义了一套操作浏览器窗口的API 二、windo…

wsl ubuntu 安装cuda nvcc环境

wsl ubuntu 安装cuda环境&#xff1a; CUDA Toolkit 11.6 Downloads | NVIDIA DeveloperDownload CUDA Toolkit 11.6 for Linux and Windows operating systems.https://developer.nvidia.com/cuda-11-6-0-download-archive?target_osLinux&target_archx86_64&Distri…

二进制安全找实习记录

就安全岗而言&#xff0c;这里笔者仅仅面试了腾讯的科恩实验室内核安全和浏览器安全&#xff08;其它的就面了一下前后端开发&#xff0c;这就不说了&#xff0c;笔者也没打算搞开发&#xff09;&#xff0c;然后倒在了一面。然后有的问题忘记了&#xff0c;仅仅记录一下自己回…

Word粘贴时出现“运行时错误53,文件未找到:MathPage.WLL“的解决方案

在安装完MathType后&#xff0c;打开word复制粘贴时报错“运行时错误53,文件未找到&#xff1a;MathPage.WLL” 首先确定自己电脑的位数&#xff08;这里默认32位&#xff09; 右击MathType桌面图标&#xff0c;点击“打开文件所在位置”&#xff0c; 然后分别找到MathPage.W…

【原理图与PCB专题】使用Cadence如何在Layout时直接互换相同功能的PIN

在实际的项目中,比如有一些排阻、FPGA、ESD二极管引脚其实是可以互换的,但是如果没有使用PinGroup属性功能,对于大公司原理图设计与PCB Layout分开的情况,我们可能需要按以下步骤: 这个步骤中存在通知和等待过程,如果存在多次(如多个器件,或是修改后调整又觉得不合适)…

LeetCode 面试经典150题 121.买卖股票的最佳时机

题目&#xff1a; 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔交易…

python 直方图

python可以调用hist方法绘制直方图。 import matplotlib.pyplot as plt import numpy as np; plt.rcParams["font.family"]["SimHei"] # 确保图中中文字体正确显示 x[0.1,0.2,0.3,0.4,0.5,0.6,0.1,0.2,0.2,0.2] plt.xlabel(满意程度) plt.ylabel(频数) …

npm下载慢换国内镜像地址

1 设置淘宝镜像地址 npm config set registry http://registry.npm.taobao.org 2 查看当前下载地址 npm config get registry 3 其它镜像地址列表&#xff1a; 1. 官方镜像&#xff1a;https://registry.npmjs.org/ 2. 淘宝镜像&#xff1a;https://registry.npm.taobao.o…

机器学习模型—XGBoost

机器学习模型—XGBoost XGBoost(Extreme Gradient Boosting)是由陈天奇等人于2014年提出的一个高效可扩展的梯度提升库。它在梯度提升框架的基础上进行了优化和改进,被广泛应用于机器学习竞赛和实际应用中 作为GBDT(Gradient Boosting Decision Tree)的扩展版本,XGBoost在算…

门牌制作-蓝桥杯?-Lua 中文代码解题第3题

门牌制作-蓝桥杯&#xff1f;-Lua 中文代码解题第3题 小蓝要为一条街的住户制作门牌号。 这条街一共有 2020 位住户&#xff0c;门牌号从 1 到 2020 编号。 小蓝制作门牌的方法是先制作 0 到 9 这几个数字字符&#xff0c;最后根据需要将字符粘贴到门牌上&#xff0c;例如门牌 …

3D Occupancy 预测冠军方案:FB-OCC

文章结尾有视频和连接 背景知识 Occupancy 更像是一个语义分割任务&#xff0c;但是它是 3D 空间的语义分割它的我们对 Occupancy 分自己的期望是它能够具有通用的这种目标建模的能力&#xff0c;才能够不是不受制于这种目标框这种几何的矩形的这种约束而能够建模任意形状的这…

springboot蛋糕订购小程序的设计与实现

摘 要 相比于以前的传统手工管理方式&#xff0c;智能化的管理方式可以大幅降低商家的运营人员成本&#xff0c;实现了蛋糕订购的标准化、制度化、程序化的管理&#xff0c;有效地防止了蛋糕订购的随意管理&#xff0c;提高了信息的处理速度和精确度&#xff0c;能够及时、准确…

废狗的Python连接MySQL之旅

我想本地用python连接mysql中的表&#xff0c;但是我不会。。。。 MySQL 安装mysql MySQL下载与安装-CSDN博客 安装可视化界面navicat 链接&#xff1a;https://pan.baidu.com/s/1esCF7W1Xwh1kIiw0OmKtjg 提取码&#xff1a;f4s0 开启mysql服务 net start mysql //开启 …

Nginx高级技术: 代理缓存配置

一、缓存说明 Nginx缓存&#xff0c;Nginx 提供了一个强大的反向代理和 HTTP 服务器功能&#xff0c;同时也是一个高效的缓存服务器。一般情况下系统用到的缓存有以下三种&#xff1a; 1、服务端缓存&#xff1a;缓存存在后端服务器&#xff0c;如 redis。 2、代理缓存&#…

【Leetcode】top 100 矩阵

73 矩阵置零 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 方法一&#xff1a;拷贝出一个同样大小的矩阵&#xff0c;根据拷贝矩阵在原矩阵上修改元素&#xff1b; 空间复杂度O(mn) 方法二&…

数据分析-Pandas的直接用Matplotlib绘图

数据分析-Pandas的直接用Matplotlib绘图 数据分析和处理中&#xff0c;难免会遇到各种数据&#xff0c;那么数据呈现怎样的规律呢&#xff1f;不管金融数据&#xff0c;风控数据&#xff0c;营销数据等等&#xff0c;莫不如此。如何通过图示展示数据的规律&#xff1f; 数据表…

【LeetCode热题100】23. 合并 K 个升序链表(链表)

一.题目要求 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中&#xff0c;返回合并后的链表。 二.题目难度 困难 三.输入样例 示例 1&#xff1a; 输入&#xff1a;lists [[1,4,5],[1,3,4],[2,6]] 输出&#xff1a;[1,1,2,…