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 = 0
      setInterval(function () {
         i++
         img.src = sliderData[i % 4].url
         p.innerHTML = sliderData[i % 4].title
         footer.style.backgroundColor = sliderData[i % 4].color
         document.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 = 0
      
      prev.addEventListener('click',function(){
         i--
         i=i<0?sliderData.length-1:i
         img.src = sliderData[i % 4].url
         p.innerHTML = sliderData[i % 4].title
         footer.style.backgroundColor = sliderData[i % 4].color
         document.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].url
         p.innerHTML = sliderData[i % 4].title
         footer.style.backgroundColor = sliderData[i % 4].color
         document.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>