Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 自动滚动轮播图
Blogger Information
Blog 19
fans 0
comment 0
visits 10673
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
自动滚动轮播图
无名小辈
Original
642 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>轮播图</title>
  8. <style>
  9.     * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.     }
  15.     li {
  16.         list-style: none;
  17.     }
  19.     a {
  20.         text-decoration: none;
  21.         color: #343434;
  22.     }
  25.     div.banner {
  26.         width: 80vw;
  27.         margin: 0 auto;
  28.         position: relative;
  29.         z-index: 10;
  30.     }
  32.     div.banner div.images {
  33.         width: 100%;
  34.     }
  36.     div.banner div.images a {
  37.         width: 100%;
  38.         height: 100%;
  39.         display: none;
  40.     }
  42.     div.banner div.images a.active {
  43.         display: block;
  44.     }
  46.     div.banner div.images img {
  47.         width: 100%;
  48.     }
  50.     div.banner div.btns {
  51.         position: absolute;
  52.         width: auto;
  53.         display: grid;
  54.         grid-template-columns: repeat(4, 20px);
  56.         gap: 10px;
  57.         height: 10px;
  58.         bottom: 20px;
  59.         right: 20px;
  60.         z-index: 200;
  61.         overflow: hidden;
  62.     }
  64.     div.banner div.btns span {
  65.         width: 100%;
  66.         height: 100%;
  67.         display: block;
  68.         background-color: aliceblue;
  69.         border-radius: 10px;
  70.         cursor: pointer;
  71.         font-size: 2px;
  72.     }
  74.     div.banner div.btns span:hover,
  75.     div.banner div.btns span.active {
  76.         background-color: blueviolet;
  77.     }
  78. </style>
  79. </head>
  81. <body>
  82. <div class="banner">
  83.     <div class="images">
  84.         <a href="https://www.php.cn/k.html" target="_blank"><img
  85.                 src="https://img.php.cn/upload/aroundimg/000/000/001/62ea76c2b5ace916.png"></a>
  86.         <a href="https://www.php.cn/k.html?1" target="_blank"><img
  87.                 src="https://img.php.cn/upload/aroundimg/000/000/001/62b2806382aa1939.png"></a>
  88.         <a href="https://www.php.cn/blog/detail/33314.html" data-index="3"><img
  89.                 src="https://img.php.cn/upload/aroundimg/000/000/001/623c25c006c91144.jpg"></a>
  90.         <a href="https://www.php.cn/app/" target="_blank"><img
  91.                 src="https://img.php.cn/upload/aroundimg/000/000/068/62398180bdae8398.jpg"></a>
  92.     </div>
  93.     <div class="btns"></div>
  94. </div>
  96. <script>
  98.     // 遍历图片，取到dataset.index
  99.     const images = document.querySelectorAll('.images > a');
  100.     //定时器开关
  101.     let lunbo = '';
  103.     // 为第一个图片，添加 active 样式
  104.     images[0].classList.add('active');
  105.     // 根据 key 的下标，添加 data-index 的标识
  106.     images.forEach((item, key) => item.dataset.index = key);
  109.     // 遍历按钮，取到dataset.index
  110.     const btns = document.querySelector('.btns');
  112.     // 在 btns 下面，添加 span
  113.     images.forEach((item) => btns.insertAdjacentHTML('beforeEnd', `<span data-index='${item.dataset.index}'></span>`));
  115.     // 找到 images 图片中 active 样式的下标，然后 btns 根据 下标 为 span 标签 添加 active 样式
  116.     [...btns.children][[...images].find((item) => item.className == 'active').dataset.index].classList.add('active');
  118.     // 添加事件，鼠标点击后，跳转图片
  119.     btns.addEventListener('click', show, true);
  121.     //添加事件，鼠标移入后，暂停轮播
  122.     btns.addEventListener('mouseover', showStop, true);
  123.     //添加事件，鼠标移出后，开始轮播
  124.     btns.addEventListener('mouseout', showStart, true);
  125.     function show() {
  126.         if (event.target.dataset.index) {
  127.             event.stopPropagation();   // 阻止事件冒泡
  128.             event.preventDefault();    // 阻止默认事件
  130.             // 移除 div.btns 下面 span 标签的 active 样式
  131.             [...btns.children].forEach((item) => item.classList.remove('active'))
  132.             // 为 div.btns 下面 span 标签 添加 active 样式
  133.             event.target.classList.add('active');
  135.             //移除 div.images 下面 A 标签的 active样式
  136.             images.forEach((item) => item.classList.remove('active'));
  137.             // 为 div.images 下面 A 标签 添加 active 样式
  138.             [...images].find((item) => item.dataset.index == event.target.dataset.index).classList.add('active');
  140.             // console.log(Object.keys(btns.children));
  141.         }
  142.     }
  144.     function showStop() {
  145.         clearInterval(lunbo);
  146.     }
  148.     function showStart() {
  149.         // 定时播放
  150.         lunbo = setInterval(function (arr) {
  151.             let index = arr.shift();
  152.             btns.children[index].dispatchEvent(new Event('click'));
  153.             arr.push(index)
  154.             console.log(btns.children[index]);
  155.         }, 2000, Object.keys(btns.children));
  156.     }
  158.     showStart();
  159. </script>
  161. </body>
  163. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post