Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 轮播图实例
Blogger Information
Blog 24
fans 0
comment 0
visits 10948
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
582 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  16.         .slideshow {
  17.             width: 240px;
  18.             height: 360px;
  19.         }
  21.         .slideshow .imgs {
  22.             width: inherit;
  23.             height: inherit;
  24.         }
  26.         .slideshow img {
  27.             width: 100%;
  28.             height: 100%;
  29.             border-radius: 10px;
  30.             /* 默认情况下需要全部隐藏 */
  31.             display: none;
  32.         }
  34.         /* 当class有active的属性时,为激活状态 显示图片 */
  35.         .slideshow img.active {
  36.             display: block;
  37.         }
  39.         /* 当鼠标悬停时,有点击模样 */
  40.         .slideshow img:hover {
  41.             cursor: pointer;
  42.         }
  44.         .slideshow .btns {
  45.             display: flex;
  46.             place-content: center;
  47.             transform: translateY(-40px);
  48.         }
  50.         .slideshow span {
  51.             height: 16px;
  52.             width: 16px;
  53.             /* 未激活属于透明状态 */
  54.             background-color: rgba(233, 233, 233, 0.5);
  55.             margin: 5px;
  56.             border-radius: 50%;
  57.         }
  59.         .slideshow span.active {
  60.             /* 激活状态给个颜色 */
  61.             background-color: orangered;
  62.         }
  64.         .slideshow span:hover {
  65.             cursor: pointer;
  66.         }
  67.     </style>
  68. </head>
  70. <body>
  71.     <div class="slideshow">
  72.         <!-- 1. 图片容器 -->
  73.         <div class="imgs">
  74.             <!-- <img src="./1111/slideshow/static/images/item1.jpeg" alt="" class="active" />
  75.             <img src="./1111/slideshow/static/images/item2.jpeg" alt="" />
  76.             <img src="./1111/slideshow/static/images/item3.jpeg" alt="" /> -->
  77.         </div>
  78.         <!-- 2. 按钮容器 -->
  79.         <div class="btns">
  80.             <!-- <span class="active"></span>
  81.             <span></span>
  82.             <span></span> -->
  83.         </div>
  84.     </div>
  85.     <script type="module">
  86.         import { createImgs, createBtns, switchImg, timePlay } from '/pic.js';
  87.         // 拿到容器 方便以下直接使用
  88.         const imgs = document.querySelector('.imgs');
  89.         const btns = document.querySelector('.btns');
  90.           //网站一加载 就开始运行这些js
  91.         window.onload = function () {
  92.             // 创建图片组
  93.             createImgs(imgs)
  94.             // 创建按钮组
  95.             createBtns(imgs, btns)
  96.             //btns.children是个类数组,用...转换成数组 使用foreach 让每个按钮都绑定上点击事件
  97.             const arrbtn = [...btns.children];
  98.             arrbtn.forEach(function (btn) {
  99.                 btn.onclick = function () {
  100.                     switchImg(this, imgs)
  101.                 }
  102.             })
  103.             const btnArr = [...btns.children];
  104.             // 按钮索引的数组
  105.             const btnKeys = Object.keys(btns.children);
  106.             setInterval(
  107.                 function (btnArr, btnKeys) {
  108.                     timePlay(btnArr, btnKeys);
  109.                 },
  110.                 1000,
  111.                 btnArr,
  112.                 btnKeys
  113.             );
  114.         }
  116.     </script>
  117. </body>
  119. </html>
  1. const Arrimg = [
  2.   {
  3.     key: 1,
  4.     url: "http://baidu.com",
  5.     src: "./1111/slideshow/static/images/item1.jpeg",
  6.   },
  7.   {
  8.     key: 2,
  9.     url: "http://baidu.com",
  10.     src: "./1111/slideshow/static/images/item2.jpeg",
  11.   },
  12.   {
  13.     key: 3,
  14.     url: "http://baidu.com",
  15.     src: "./1111/slideshow/static/images/item3.jpeg",
  16.   },
  17. ];
  18. // 创建图片
  19. function createImgs(imgs) {
  20.   // 创建局部代码片段
  21.   const frag = new DocumentFragment();
  23.   for (let i = 0; i < Arrimg.length; i++) {
  24.     // 创建img
  25.     const img = document.createElement("img");
  26.     img.src = Arrimg[i].src;
  27.     img.dataset.key = Arrimg[i].key;
  28.     // 让第一个img处于激活状态
  29.     if (i === 0) {
  30.       img.classList.add("active");
  31.     }
  32.     //给每个图片绑定上一个点击事件
  33.     img.onclick = function () {
  34.       location.href = Arrimg[i].url;
  35.     };
  36.     // 把每个img加入到临时代码片段中
  37.     frag.append(img);
  38.   }
  39.   // 加入到图片容器
  40.   imgs.append(frag);
  41. }
  42. // 创建按钮 有多少图片 就要创建多少按钮
  43. function createBtns(imgs, btns) {
  44.   // 数组长度 就是按钮的个数
  45.   let length = Arrimg.length;
  46.   for (let i = 0; i < length; i++) {
  47.     // 创建按钮元素
  48.     const btn = document.createElement("span");
  49.     // 让按钮的key 和 图片的key 一一对应
  50.     btn.dataset.key =
  51.       imgs.children[i].dataset.key;
  52.       // 同样 让第一个按钮处于激活状态
  53.     if (i === 0) {
  54.       btn.classList.add("active");
  55.     }
  56.     // 把每个btn 加入到按钮容器中
  57.     btns.append(btn);
  58.   }
  59. }
  61. //  创建按钮点击事件 切换激活状态
  62. function switchImg(btn, imgs) {
  63.   // 先让所有按钮的激活状态全部取消
  64.   [...btn.parentNode.children].forEach(btn =>
  65.     btn.classList.remove("active")
  66.   );
  67.   [...imgs.children].forEach(img =>
  68.     img.classList.remove("active")
  69.   );
  71.   // 2. 将当前的按钮处于激活状态
  72.   btn.classList.add("active");
  74.   // 3. 根据按钮索引,找到对应的图片
  75.   const currImg = [...imgs.children].find(
  76.     function (img) {
  77.       return img.dataset.key == btn.dataset.key;
  78.     }
  79.   );
  80.   currImg.classList.add("active");
  81. }
  82. // 定时播放
  83. function timePlay(btnArr, btnKeys) {
  84.   // 1. 头部取一个
  85.   let key = btnKeys.shift();
  87.   // 2. 根据索引找到对应的按钮,再给它自动派发一个点击事件
  88.   btnArr[key].dispatchEvent(new Event("click"));
  90.   // 3. 把刚才到出的按钮再从尾部进入,实现首尾相连
  91.   btnKeys.push(key);
  92. }
  93. export { createImgs, createBtns, switchImg ,timePlay};
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