WEB APIs（2）

应用定时器可以写一个定时轮播图，如下

<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>~</title><link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico"><link rel="stylesheet" href="css/初始化表.css"><link rel="stylesheet" href="css/index.css"><meta name="keywords" content="..." /><style>/*写代码时始终要考虑权重问题！*/@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?au9n7q');src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?au9n7q') format('truetype'),url('fonts/icomoon.woff?au9n7q') format('woff'),url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-footer {height: 80px;background-color: rgb(72, 131, 213);padding: 12px 12px 0 12px;position: relative;}ul {display: flex;align-items: center;}.toggle {position: absolute;right: 0;top: 12px;display: flex;}ul li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background-color: #fff;opacity: 0.4;cursor: pointer;}ul .active {width: 12px;height: 12px;opacity: 1;}</style></head><body><div class="slider"><div class="slider-wrapper"><img src="img/1.jpg" alt=""></div><div class="slider-footer"><p>哆啦A梦1</p><ul><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>const sliderData = [{ url: 'img/1.jpg', title: '哆啦A梦1', color: 'rgb(72, 131, 213)' },{ url: 'img/2.jpg', title: '哆啦A梦2', color: 'rgb(43,35,26)' },{ url: 'img/3.jpg', title: '哆啦A梦3', color: 'rgb(36,3,31)' },{ url: 'img/4.jpg', title: '哆啦A梦4', color: 'rgb(166,131,143)' }]function getRandom(m, n) {return Math.floor(Math.random() * (n - m + 1)) + m}const random = getRandom(0, 3)const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const footer = document.querySelector('.slider-footer')document.querySelector(`ul li:nth-child(${1})`).classList.add('active')let i = 0setInterval(function () {i++img.src = sliderData[i % 4].urlp.innerHTML = sliderData[i % 4].titlefooter.style.backgroundColor = sliderData[i % 4].colordocument.querySelector(`ul li:nth-child(${((i - 1) % 4) + 1})`).classList.remove('active')document.querySelector(`ul li:nth-child(${(i % 4) + 1})`).classList.add('active')}, 1000)</script>
</body></html>

效果：

此案例有一个缺陷，点击页面无法与用户交互，这就用到了事件监听

事件监听

什么是事件

编程时系统内发生的动作，比如单机一个按钮

监听即一旦有事件触发立即调用一个函数做出响应也称绑定事件

语法：

元素对象.addEventListener('事件类型',要执行的函数)

事件源：哪个DOM元素被触发，就获取这个元素

事件类型：用什么方式触发，鼠标点击click，鼠标经过mouseover等

调用函数：要做什么事

点击即可弹出对话框

事件类型

鼠标事件（click鼠标经过，mouseenter点击和mouseleave离开）

焦点事件（focus获得焦点，blur失去焦点）

键盘事件（Keydown键盘按下和Keyup抬起）

文本事件（input用户输入事件）

由此，可以得到完整轮播图

<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>~</title><link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico"><link rel="stylesheet" href="css/初始化表.css"><link rel="stylesheet" href="css/index.css"><meta name="keywords" content="..." /><style>/*写代码时始终要考虑权重问题！*/@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?au9n7q');src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?au9n7q') format('truetype'),url('fonts/icomoon.woff?au9n7q') format('woff'),url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-footer {height: 80px;background-color: rgb(72, 131, 213);padding: 12px 12px 0 12px;position: relative;}ul {display: flex;align-items: center;}.toggle {position: absolute;right: 0;top: 12px;display: flex;}ul li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background-color: #fff;opacity: 0.4;cursor: pointer;}ul .active {width: 12px;height: 12px;opacity: 1;}.toggle {right: 0;top: 12px;}.toggle button {margin-right: 10px;width: 28px;height: 28px;border: none;background: rgba(255,255,255,0.1);color: #fff;border-radius: 4px;cursor: pointer;appearance: none;}.toggle button:hover {background: rgba(255,255,255,0.2);}</style></head><body><div class="slider"><div class="slider-wrapper"><img src="img/1.jpg" alt=""></div><div class="slider-footer"><p>哆啦A梦1</p><ul><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>const sliderData = [{ url: 'img/1.jpg', title: '哆啦A梦1', color: 'rgb(72, 131, 213)' },{ url: 'img/2.jpg', title: '哆啦A梦2', color: 'rgb(43,35,26)' },{ url: 'img/3.jpg', title: '哆啦A梦3', color: 'rgb(36,3,31)' },{ url: 'img/4.jpg', title: '哆啦A梦4', color: 'rgb(166,131,143)' }]const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')const footer = document.querySelector('.slider-footer')const next = document.querySelector('.next')const prev = document.querySelector('.prev')const slider = document.querySelector('.slider')document.querySelector(`ul li:nth-child(${1})`).classList.add('active')let n=setInterval(function () {next.click()}, 900)let i = 0prev.addEventListener('click',function(){i--i=i<0?sliderData.length-1:iimg.src = sliderData[i % 4].urlp.innerHTML = sliderData[i % 4].titlefooter.style.backgroundColor = sliderData[i % 4].colordocument.querySelector(`ul li:nth-child(${((i + 1) % 4) + 1})`).classList.remove('active')document.querySelector(`ul li:nth-child(${(i % 4) + 1})`).classList.add('active')})next.addEventListener('click',function(){i++img.src = sliderData[i % 4].urlp.innerHTML = sliderData[i % 4].titlefooter.style.backgroundColor = sliderData[i % 4].colordocument.querySelector(`ul li:nth-child(${((i - 1) % 4) + 1})`).classList.remove('active')document.querySelector(`ul li:nth-child(${(i % 4) + 1})`).classList.add('active')})slider.addEventListener('mouseenter',function(){clearInterval(n)})slider.addEventListener('mouseleave',function(){n=setInterval(function () {next.click()}, 900)})</script>
</body></html>