Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js 轮播图功能：上下翻页，自动播放----0409
Blogger Information
Blog 18
fans 1
comment 0
visits 12266
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
js 轮播图功能：上下翻页，自动播放----0409
木樨
Original
1009 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.     <link rel="stylesheet" href="banner/banner.css" />
  9.   </head>
  10.   <body>
  11.     <div class="container">
  12.       <!-- 1. 图片组 -->
  13.       <nav class="imgs">
  14.         <a href=""><img src="banner/banner1.jpg" alt="" data-index="1" class="active" /></a>
  15.         <a href=""><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
  16.         <a href=""><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
  17.         <a href=""><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
  18.       </nav>
  20.       <!-- 2. 图片中下部的小按钮 -->
  21.       <nav class="btns">
  22.         <!-- 动态创建小按钮数量 -->
  23.       </nav>
  25.       <!-- 3. 翻页 -->
  26.       <nav class="skip">
  27.         <a href="" class="prev">&lt;</a>
  28.         <a href="" class="next">&gt;</a>
  29.       </nav>
  30.     </div>
  32.     <script>
  33.       // 获取元素
  34.       const container = document.querySelector(".container");
  35.       const imgs = document.querySelectorAll(".container >.imgs img");
  36.       const btnGroup = document.querySelector(".container >.btns");
  37.       const skip = document.querySelector(".container >.skip");
  39.       // 创建出一组与图片数量对应的小按钮
  40.       function autoCreateBtns(ele, imgLength) {
  41.         const frag = document.createDocumentFragment();
  42.         for (let i = 0; i < imgLength; i++) {
  43.           const a = document.createElement("a");
  44.           a.href = "#";
  45.           a.dataset.index = i + 1;
  46.           if (i === 0) {
  47.             a.classList.add("active");
  48.           }
  49.           frag.append(a);
  50.         }
  51.         ele.append(frag);
  52.       }
  53.       autoCreateBtns(btnGroup, imgs.length);
  55.       // 为刚生成的小按钮添加点击事件
  56.       const btns = document.querySelectorAll(".container > .btns > *");
  58.       // 获取激活元素
  59.       function getActiveEle(eles) {
  60.         let activeEles = [...eles].filter(ele => ele.classList.contains("active"));
  61.         return activeEles.shift();
  62.       }
  63.       // 设置激活元素，根据按钮索引更新正在显示的图片
  64.       function setActiveEle(btnIndex) {
  65.         // 1.首先将之前的激活样式去掉
  66.         [imgs, btns].forEach(arr => {
  67.           getActiveEle(arr).classList.remove("active");
  68.           // 2.在根据当前自定义索引重新设置应该激活的按钮和图片
  69.           arr.forEach(item => {
  70.             if (item.dataset.index == btnIndex) {
  71.               item.classList.add("active");
  72.             }
  73.           });
  74.         });
  75.       }
  77.       // 为按钮添加事件
  78.       btns.forEach(btn => btn.addEventListener("click", ev => setActiveEle(ev.target.dataset.index)));
  80.       // 为翻页按钮添加点击事件,注意最后一张和第一张图片的边界处理
  81.       skip.onclick = ev => {
  82.         // 禁止默认的点击事件
  83.         ev.preventDefault();
  84.         // 获取当前显示图片的下标
  85.         let currIndex = getActiveEle(imgs).dataset.index;
  86.         // 下一页操作
  87.         if (ev.target.classList.contains("next")) {
  88.           let index = currIndex < imgs.length ? ++currIndex : 1;
  89.           setActiveEle(index);
  90.           return;
  91.         }
  92.         // 上一页操作
  93.         if (ev.target.classList.contains("prev")) {
  94.           let index = currIndex > 1 ? --currIndex : imgs.length;
  95.           setActiveEle(index);
  96.           return;
  97.         }
  98.       };
  100.       // 轮播图自动切换
  101.       // 使用setInterval()定时器实现图片的每隔 2 秒自动切换功能
  102.       var timer;
  103.       function autoChange() {
  104.         timer = setInterval(() => {
  105.           // 获取当前显示图片的下标
  106.           let currIndex = getActiveEle(imgs).dataset.index;
  107.           let index = currIndex < imgs.length ? ++currIndex : 1;
  108.           setActiveEle(index);
  109.         }, 2000);
  110.       }
  111.       autoChange();
  112.       // 监听鼠标移入事件和移出事件，实现鼠标悬停在图片上时，停止自动切换，停留在当前图片
  113.       container.addEventListener("mouseenter", () => clearInterval(timer));
  114.       // 鼠标移出时继续自动切换
  115.       container.addEventListener("mouseleave", autoChange);
  116.     </script>
  117.   </body>
  118. </html>

banner.css 文件：

  1. /* 初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. a {
  8.   text-decoration: none;
  9. }
  11. /* 轮播图的容器 */
  12. .container {
  13.   width: 62.5em;
  14.   height: 22em;
  15.   margin: 1em auto;
  16.   /* 转为定位元素/定位父级 */
  17.   position: relative;
  18. }
  19. /* 图片组 */
  20. .container > .imgs img {
  21.   width: 100%;
  22.   height: 100%;
  24.   /* 默认全部隐藏 */
  25.   display: none;
  27.   /* 将所有的图片进行绝对定位，确保每一次只看到一张,所有图片共享这个容器 */
  28.   position: absolute;
  29.   left: 0;
  30.   top: 0;
  31. }
  33. /* 设置默认显示的图片(第一张) */
  34. .container > .imgs img.active {
  35.   display: block;
  36. }
  38. /* 按钮组(独立按钮) */
  39. .container > .btns {
  40.   position: absolute;
  41.   left: 0;
  42.   right: 0;
  43.   bottom: 0;
  44.   /* 水平居中 */
  45.   text-align: center;
  46. }
  47. .container > .btns a {
  48.   /* 转成行内块元素: 即能水平排列,双支持宽度设置 */
  49.   display: inline-block;
  50.   padding: 0.5em;
  51.   margin: 0 0.2em;
  52.   background-color: #fff;
  53.   border-radius: 50%;
  54. }
  55. .container > .btns a.active {
  56.   background-color: #000;
  57. }
  58. /* 翻页按钮 */
  59. .container .skip a {
  60.   position: absolute;
  61.   width: 2.5rem;
  62.   height: 5rem;
  63.   line-height: 5rem;
  64.   text-align: center;
  65.   opacity: 0.3;
  66.   top: 9rem;
  67.   font-weight: lighter;
  68.   font-size: 2rem;
  69.   background-color: #ccc;
  70. }
  71. .container .skip .prev {
  72.   left: 0;
  73. }
  74. .container .skip .next {
  75.   right: 0;
  76. }
  77. .container .skip *:hover {
  78.   opacity: 0.6;
  79.   color: #666;
  80. }
Correcting teacher：天蓬老师天蓬老师

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