0
0

javaScript交互案例

1、模态框(弹出框)

（1）、需求：

  1. 点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层
  2. 点击关闭按钮，可以关闭模态框，并且同时关闭半透明遮挡层
  3. 鼠标放在模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动
  4. 鼠标松开，可以停止拖动模态框移动

思路：

  1. 点击弹出层，模态框和遮挡层就会显示出来 display:block
  2. 点击关闭按钮，模态框和遮罩层会隐藏起来 display:none
  3. 在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标
  4. 触发事件是鼠标按下mousedown，鼠标移动mousemove 鼠标松开 mouseup
  5. 拖拽过程，鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框就可以跟着鼠标走了
  6. 鼠标按下触发的事件源是h2
  7. 鼠标的坐标减去鼠标内的坐标，才是模态框真正的位置
  8. 鼠标按下，我们要得到鼠标在盒子的坐标
  9. 鼠标移动，就让模态框的坐标设置为：鼠标坐标减去盒子坐标即可，注意移动时间写到按下
  10. 鼠标松开，就停止拖拽，可以让鼠标移动事件解除

（2）、es5

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Document</title>
  6.     <style>
  7.       * {
  8.         margin: 0;
  9.         padding: 0;
  10.       }
  11.       h1 {
  12.         cursor: pointer;
  13.         margin: 50px auto;
  14.       }
  15.       /* 模态框 */
  16.       .modal-box {
  17.         display: none;
  18.         width: 400px;
  19.         height: 300px;
  20.         background-color: #bfa;
  21.         position: absolute;
  22.         left: 50%;
  23.         top: 50%;
  24.         transform: translate(-50%, -50%);
  25.         z-index: 99;
  26.       }
  27.       button {
  28.         position: absolute;
  29.         right: 50px;
  30.         top: 30px;
  31.         width: 80px;
  32.         line-height: 40px;
  33.       }
  34.       /* 遮罩层 */
  35.       .bg {
  36.         display: none;
  37.         position: absolute;
  38.         width: 100%;
  39.         height: 100%;
  40.         left: 0;
  41.         top: 0;
  42.         background-color: #000;
  43.         opacity: 0.3;
  44.       }
  45.       .title {
  46.         background-color: aqua;
  47.         line-height: 60px;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <h1>点击，弹出模态框</h1>
  53.     <!-- 弹出框 -->
  54.     <div class="modal-box">
  55.       <button>关闭</button>
  56.       <h2 class="title">我是一个可爱的模态框·····</h2>
  57.     </div>
  58.     <!-- 遮罩层 -->
  59.     <div class="bg"></div>
  60.     <!-- js -->
  61.     <script>
  62.       // 1、获取元素
  63.       var h1 = document.querySelector("h1");
  64.       var modalBox = document.querySelector(".modal-box");
  65.       var btn = document.querySelector("button");
  66.       var bg = document.querySelector(".bg");
  67.       var title = document.querySelector(".title");
  68.       // 2、点击显示，隐藏模态框
  69.       h1.onclick = function () {
  70.         modalBox.style.display = "block";
  71.         bg.style.display = "block";
  72.       };
  73.       btn.onclick = function () {
  74.         modalBox.style.display = "none";
  75.         bg.style.display = "none";
  76.       };
  77.       // 3、开始拖拽模态框
  78.       //（1）、当我们鼠标按下，就获得鼠标在盒子内的坐标
  79.       title.addEventListener("mousedown", function (e) {
  80.         var x = e.pageX - modalBox.offsetLeft;
  81.         var y = e.pageY - modalBox.offsetTop;
  82.         //  (2)、鼠标移动的时候，把鼠标在页面中的坐标，减去鼠标在盒子内的坐标
  83.          // 就是不断的求modalBox.offsetLeft ，modalBox.offsetTop
  84.         // 不能直接用offset
  85.         // 直接用offset得到的是盒子本来的坐标，盒子要动起来，才能改变offset的值，
  86.         // 当我们是想要先改变offset然后用他来改变盒子的位置，所以不能直接用offset
  87.         // 而是用鼠标的位置来动态的输入offset
  88.         function move(e) {
  89.           modalBox.style.left = e.pageX - x + "px";
  90.           modalBox.style.top = e.pageY - y + "px";
  91.            // 这样设置，会导致，初始化移动时，就把鼠标的位置，赋值给盒子的中心，有个跳跃的过程
  92.           // modalBox.style.left = e.pageX  + "px";
  93.           // modalBox.style.top = e.pageY  + "px";
  94.           // modalBox.offsetLeft 是固定的值，不会变化的，需要先动盒子才能得到新的modalBox.offsetLeft
  95.           // modalBox.style.left = modalBox.offsetLeft + "px";
  96.           // modalBox.style.top = modalBox.offsetTop + "px";
  97.         }
  98.         document.addEventListener("mousemove", move);
  99.         // （3）、鼠标弹起，就让鼠标移动事件移除
  100.         document.addEventListener("mouseup", function () {
  101.           document.removeEventListener("mousemove", move);
  102.         });
  103.       });
  104.     </script>
  105.   </body>
  106. </html>

（3）、es6

  1. <script>
  2.       let that;
  3.       class Modal {
  4.         constructor() {
  5.           that = this;
  6.           // 获取元素
  7.           this.clickH1 = document.getElementById("clickH1");
  8.           this.btn = document.getElementById("btn");
  9.           this.modalBox = document.querySelector(".modal-box");
  10.           this.bg = document.querySelector(".bg");
  11.           this.title = document.querySelector(".title");
  12.           // 调用监听函数
  13.           this.event();
  14.         }
  15.         // 监听函数
  16.         event() {
  17.           this.clickH1.addEventListener("click", this.clickH1Fun);
  18.           this.btn.addEventListener("click", this.btnFun);
  19.           this.title.addEventListener("mousedown", this.titleFun);
  20.         }
  21.         // 点击出现遮罩层
  22.         clickH1Fun() {
  23.           that.bg.style.display = "block";
  24.           that.modalBox.style.display = "block";
  25.         }
  26.         // 点击关闭按钮
  27.         btnFun() {
  28.           that.bg.style.display = "none";
  29.           that.modalBox.style.display = "none";
  30.         }
  31.         //鼠标按下title
  32.         titleFun(e) {
  33.           // 获取鼠标在模态框中的位置方式一
  34.           let x = e.offsetX;
  35.           let y = e.offsetY;
  36.           // 获取鼠标在模态框中的位置方式二
  37.           // let x = e.pageX - that.modalBox.offsetLeft;
  38.           // let y = e.pageY - that.modalBox.offsetTop;
  39.           console.log(x, y);
  40.           document.addEventListener("mousemove", moveFun);
  41.           function moveFun(e) {
  42.             // console.log(111);
  43.             let left = e.pageX - x;
  44.             let right = e.pageY - y;
  45.             that.modalBox.style.left = left + "px";
  46.             that.modalBox.style.top = right + "px";
  47.             that.modalBox.style.margin = 0; //left 值变化，由于过度约束，需要重新设置margin
  48.             // that.modalBox.style.transform='translate(0%, 0%)'//left 值变化，由于过度约束，需要重新设置偏移量
  49.           }
  50.           document.addEventListener("mouseup", upFun);
  51.           function upFun() {
  52.             document.removeEventListener("mousemove", moveFun);
  53.           }
  54.         }
  55.       }
  56.       new Modal();
  57.     </script>

2、放大镜

（1）html/css

    1. 整个案例可以分为三个功能模块2. 鼠标经过小图片盒子，黄色的遮罩层和大图片盒子显示，离开隐藏2个盒子功能3. 黄色的遮挡层跟随鼠标移动功能4. 移动黄色遮挡层，大图片跟随移动功能

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>放大镜案例</title>
  6.     <style>
  7.       * {
  8.         margin: 0;
  9.         padding: 0;
  10.       }
  11.       /* 小图 */
  12.       .camera {
  13.         width: 300px;
  14.         height: 300px;
  15.         position: relative;
  16.         border: 1px solid black;
  17.       }
  19.       .cameraImg img {
  20.         width: 300px;
  21.         height: 300px;
  22.       }
  23.       /* 遮罩层 */
  24.       .zoom {
  25.         width: 100px;
  26.         height: 100px;
  27.         background-color: #ccc;
  28.         opacity: 0.8;
  29.         position: absolute;
  30.         top: 0px;
  31.         left: 0px;
  32.       }
  33.       /* 大图 */
  35.       .bDiv {
  36.         width: 500px;
  37.         height: 500px;
  38.         background-color: bisque;
  39.         position: absolute;
  40.         left: 350px;
  41.         top: 0;
  42.         overflow: hidden;
  43.       }
  44.       .bImg {
  45.         position: absolute;
  46.         top: 0;
  47.         left: 0;
  48.       }
  49.     </style>
  50.   </head>
  52.   <body>
  53.     <div class="camera">
  54.       <!-- 小图 -->
  55.       <div class="cameraImg">
  56.         <img src="./img0.jpg" alt="" />
  57.       </div>
  58.       <!-- 放大镜 -->
  59.       <div class="zoom"></div>
  60.       <!-- 大图 -->
  61.       <div class="bDiv">
  62.         <img src="./img1.jpg" alt="" class="bImg" />
  63.       </div>
  64.     </div>
  65.     <!-- 引入js -->
  66.     <script src="./放大镜.js"></script>
  67.   </body>
  68. </html>

（2）、es5 js

  1. window.onload = function () {
  2.   var camera = document.querySelector(".camera");
  3.   var zoom = document.querySelector(".zoom");
  4.   var bDiv = document.querySelector(".bDiv");
  5.   var bImg = document.querySelector(".bImg");
  6.   // 1:给camera绑定鼠标移入移除事件，让鼠标移除时，放大镜跟展示页都消失
  7.   camera.onmouseenter = function () {
  8.     zoom.style.display = "block";
  9.     bDiv.style.display = "block";
  10.   };
  11.   camera.onmouseleave = function () {
  12.     // zoom.style.display = "none";
  13.     // bDiv.style.display = "none";
  14.   };
  15.   // 2:设置放大镜zoom能跟着鼠标移动，并设置范围活动
  16.   camera.onmousemove = function (event) {
  17.     //2.1 获得鼠标的页面坐标x,y
  18.     var x = event.pageX;
  19.     var y = event.pageY;
  20.     // console.log(x, y);
  21.     //2.2 获取图相对于页面的左边，上边相对距离
  22.     var offsetX = camera.offsetLeft;
  23.     var offsetY = camera.offsetTop;
  24.     // console.log(offsetX, offsetY);
  25.     // 2.3 获取遮挡层的宽度跟高度
  26.     var zoomW = zoom.offsetWidth;
  27.     var zoomH = zoom.offsetHeight;
  28.     // console.log(zoomW,zoomH);
  30.     // 2.4 计算遮挡物的xy坐标
  31.     var left = x - offsetX - zoomW / 2;
  32.     var top = y - offsetY - zoomH / 2;
  34.     // 2.5 设置判断left  top的限制值
  35.     /* 遮盖物的最大移动距离，父元素camera的宽度减去遮盖物的宽度(300-100) */
  36.     if (left >= 200) {
  37.       left = 200;
  38.     }
  39.     if (left <= 0) {
  40.       left = 0;
  41.     }
  42.     if (top >= 200) {
  43.       top = 200;
  44.     }
  45.     if (top <= 0) {
  46.       top = 0;
  47.     }
  48.     //2.6 将宽高赋值给放大镜
  49.     zoom.style.left = left + "px";
  50.     zoom.style.top = top + "px";
  52.     /* 3、根据比例移动大图  
  53.     遮罩层的移动距离 /遮罩层最大移动距离 = 大图片移动距离/大图片最大移动距离
  54.     根据上面的等式，可以演算出
  55.     大图片的移动距离=（遮罩层的移动距离 /遮罩层最大移动距离）*大图片最大移动距离 */
  57.     //3.1 计算大图在大盒子里移动的最大距离
  59.     /* 大图的宽度，减去bDiv框子的宽度*/
  60.     var bImgMw = bImg.offsetWidth - bDiv.offsetWidth;
  61.     var bImgMh = bImg.offsetHeight - bDiv.offsetHeight;
  62.     // console.log(bDiv.offsetWidth);
  64.     // 3.2 根据比例移动大图
  65.     var bX = (left / 200) * bImgMw;
  66.     var bY = (top / 200) * bImgMh;
  68.     // 3.3 将bX，bY赋值给大图的宽高
  69.     bImg.style.left = -bX + "px";
  70.     bImg.style.top = -bY + "px";
  71.   };
  72. };

（3）、es6.js

  1. window.onload = function () {
  2.   var that;
  3.   class Camera {
  4.     constructor() {
  5.       // 保存this
  6.       that = this;
  7.       // 获取整个盒子
  8.       this.camera = document.querySelector(".camera");
  9.       this.zoom = document.querySelector(".zoom");
  10.       this.bDiv = document.querySelector(".bDiv");
  11.       this.bImg = document.querySelector(".bImg");
  12.       //初始化放大镜的位置left，top
  13.       this.left = 0;
  14.       this.top = 0;
  15.       //初始化监听函数
  16.       this.addevent();
  17.     }
  18.     // 监听事件
  19.     addevent() {
  20.       //1.1、移入显示放大镜，移出隐藏放大镜
  21.       this.camera.addEventListener("mouseenter", that.showZoom);
  22.       this.camera.addEventListener("mouseleave", that.hiddZoom);
  23.       //2、移入，放大镜随着鼠标移动
  24.       this.camera.addEventListener("mousemove", that.zoomMove);
  25.       //2、放大镜移动，大图也随着移动
  26.       this.camera.addEventListener("mousemove", that.bDivMove);
  27.     }
  28.     //1.2 鼠标移入，显示放大镜及大图
  29.     showZoom() {
  30.       that.zoom.style.display = "block";
  31.       that.bDiv.style.display = "block";
  32.     }
  33.     hiddZoom() {
  34.       that.zoom.style.display = "none";
  35.       that.bDiv.style.display = "none";
  36.     }
  37.     // 1.2 放大镜随着鼠标移动
  38.     zoomMove(e) {
  39.       // 如果直接赋值，会出现闪烁，由于只有鼠标动了，才会获取到offseX/Y的值，移动之前为0
  40.       // let left = e.offsetX;
  41.       // let top = e.offsetY;
  42.       // （1）、鼠标在页面中的坐标
  43.       var x = e.pageX;
  44.       var y = e.pageY;
  45.       //(2)、大盒子camera在在页面中的位置
  46.       var offsetLeft = that.camera.offsetLeft;
  47.       var offsetTop = that.camera.offsetTop;
  48.       //（3）、计算zoom的大小
  49.       var zoomWidth = that.zoom.offsetWidth;
  50.       var zoomHeight = that.zoom.offsetHeight;
  52.       //（4）、计算盒子中鼠标的位置
  53.       that.left = x - offsetLeft - zoomWidth / 2;
  54.       that.top = y - offsetTop - zoomHeight / 2;
  56.       //(5)、限制放大镜的移动范围，camera-zoom
  57.       if (that.left <= 0) {
  58.         that.left = 0;
  59.       }
  60.       if (that.left >= 200) {
  61.         that.left = 200;
  62.       }
  63.       if (that.top <= 0) {
  64.         that.top = 0;
  65.       }
  66.       if (that.top >= 200) {
  67.         that.top = 200;
  68.       }
  70.       //(6)、将计算出的鼠标位置赋值给zoom
  71.       that.zoom.style.left = that.left + "px";
  72.       that.zoom.style.top = that.top + "px";
  73.     }
  74.     // 3、放大镜移动，大图也随着移动
  75.     // zoom移动距离/zoom最大移动距离 = 大图移动距离/大图最大移动距离
  77.     bDivMove() {
  78.       // 计算大图的最大移动距离  大图-大图盒子大小
  79.       var bimgMaxWidth = that.bImg.offsetWidth - that.bDiv.offsetWidth;
  80.       var bimgMaxHeight = that.bImg.offsetHeight - that.bDiv.offsetHeight;
  81.       // 计算大图移动距离（zoom移动距离/zoom最大移动距离）*大图最大移动距离
  82.       var bimgLeft = (that.left / 200) * bimgMaxWidth;
  83.       var bimgTop = (that.top / 200) * bimgMaxHeight;
  85.       that.bImg.style.left = -bimgLeft + "px";
  86.       that.bImg.style.top = -bimgTop + "px";
  87.     }
  88.   }
  89.   new Camera();
  90. };

3、京东侧边导航条

需求：

    1. 原先侧边栏是绝对定位2. 当页面滚动到一定位置，侧边栏改为固定定位3. 页面继续滚动，会让返回顶部显示出来

思路：

    1. 需要用到页面滚动事件scroll，因为是页面滚动，所以事件源是document2. 滚动到某个位置，就是判断页面被卷去的上部值3. 页面被卷去的头部：可以通过window.pageYOffset获得，如果是被卷去的左侧window.pageXOffset4. 注意：元素被卷去的头部是element.scrollTop,如果是页面被卷去的头部则是window.pageYOffset
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>侧边栏案例</title>
  6.     <style>
  7.       * {
  8.         padding: 0;
  9.         margin: 0;
  10.       }
  11.       header,
  12.       footer {
  13.         width: 1000px;
  14.         height: 200px;
  15.         background-color: pink;
  16.         margin: 0 auto;
  17.       }
  18.       main {
  19.         width: 1000px;
  20.         height: 800px;
  21.         background-color: #bfa;
  22.         margin: 0 auto;
  23.       }
  24.       nav {
  25.         width: 60px;
  26.         height: 200px;
  27.         background-color: blue;
  28.         position: absolute;
  29.         right: 0;
  30.         top: 250px;
  31.         line-height: 30px;
  32.       }
  33.       span {
  34.         display: block;
  35.         width: 60px;
  36.         height: 60px;
  37.         background-color: red;
  38.         margin-top: 140px;
  39.         text-align: center;
  40.         display: none;
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <header>头部</header>
  46.     <nav>
  47.       <span
  48.         >返回 <br />
  49.         顶部</span
  50.       >
  51.     </nav>
  52.     <main>主体</main>
  53.     <footer>底部</footer>
  54.     <script>
  55.       // 1、获取元素
  56.       var span = document.querySelector("span");
  57.       var nav = document.querySelector("nav");
  58.       var main = document.querySelector("main");
  59.       // 主体以上被卷去的距离
  60.       var mainTop = main.offsetTop;
  61.       // 侧边导航以上被卷去的距离
  62.       var navTop = nav.offsetTop;
  63.       console.log(navTop);
  64.       // 2、页面滚动事件 scroll
  65.       document.addEventListener("scroll", function () {
  66.         // window.pageYOffset 获取页面被滚去的距离
  67.         // 3、判断距离，变化定位
  68.         if (window.pageYOffset >= mainTop) {
  69.           // 3.1将定位改成固定定位
  70.           nav.style.position = "fixed";
  71.           // 3.2 改成固定定位后，会有跳动，需要重新设置定位的top值,否则还是原值
  72.           nav.style.top = navTop - mainTop + "px";
  73.           // 3.3 出现返回顶部字样
  74.           span.style.display = "block";
  75.         } else {
  76.           nav.style.position = "absolute";
  77.           nav.style.top = "300px";
  78.           span.style.display = "none";
  79.         }
  80.       });
  81.     </script>
  82.   </body>
  83. </html>

4、轮播图

（1）、搭建轮播图的结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>轮播图结构</title>
  6.     <!-- <script src="../js/tools.js"></script> -->
  7.     <script src="../js/animation.js"></script>
  8.     <script src="./01.轮播图.js"></script>
  9.     <style>
  10.       * {
  11.         padding: 0;
  12.         margin: 0;
  13.         list-style: none;
  14.         text-decoration: none;
  15.       }
  16.       #outer {
  17.         width: 590px;
  18.         height: 470px;
  19.         border: 10px solid red;
  20.         margin: 50px auto;
  21.         position: relative;
  22.         overflow: hidden;
  23.       }
  24.       #outer > ul {
  25.         width: 500%;
  26.         position: absolute;
  27.         left: 0;
  28.         top: 0;
  29.       }
  30.       #outer > ul > li {
  31.         float: left;
  32.       }
  33.       .dot {
  34.         position: absolute;
  35.         bottom: 30px;
  36.         left: 50%;
  37.         transform: translate(-50%, -50%);
  38.       }
  39.       .dot > a {
  40.         display: inline-block;
  41.         width: 15px;
  42.         height: 15px;
  43.         border-radius: 50%;
  44.         background-color: #999;
  45.         margin: 0 5px;
  46.       }
  47.       .dot > .active,
  48.       .dot > a:hover {
  49.         background-color: orange;
  50.       }
  51.       .prev,
  52.       .next {
  53.         width: 40px;
  54.         height: 40px;
  55.         background-color: rgba(0, 0, 0, 0.4);
  56.         text-align: center;
  57.         position: absolute;
  58.         font-size: 30px;
  59.         color: #999;
  60.         /* 隐藏左右按钮 */
  61.         display: none;
  62.       }
  63.       .prev > a,
  64.       .next > a {
  65.         color: #fff;
  66.       }
  67.       .prev {
  68.         left: 10px;
  69.         top: 42%;
  70.       }
  71.       .next {
  72.         right: 10px;
  73.         top: 42%;
  74.       }
  75.     </style>
  76.   </head>
  77.   <body>
  78.     <div id="outer">
  79.       <!-- 图片部分 -->
  80.       <ul>
  81.         <li>
  82.           <a href="#"><img src="./img/1.jpg" alt="" /></a>
  83.         </li>
  84.         <li>
  85.           <a href="#"><img src="./img/2.jpg" alt="" /></a>
  86.         </li>
  87.         <li>
  88.           <a href="#"><img src="./img/3.jpg" alt="" /></a>
  89.         </li>
  90.         <li>
  91.           <a href="#"><img src="./img/4.jpg" alt="" /></a>
  92.         </li>
  93.         <!-- <li>
  94.           <a href="#"><img src="./img/1.jpg" alt="" /></a>
  95.         </li> -->
  96.       </ul>
  97.       <!-- 导航点  class="active"-->
  98.       <div class="dot">
  99.         <!-- <a href="#" ></a>
  100.         <a href="#"></a>
  101.         <a href="#"></a>
  102.         <a href="#"></a> -->
  103.       </div>
  104.       <!-- 左右导航 -->
  105.       <ol class="prevNext">
  106.         <li class="prev">
  107.           <a href="#"> &lt;</a>
  108.         </li>
  109.         <li class="next">
  110.           <a href="#">&gt;</a>
  111.         </li>
  112.       </ol>
  113.     </div>
  114.   </body>
  115. </html>

（2）、es5写法

功能需求：

  • 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
  • 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理
  • 图片播放的同时，下面的小圆圈模块跟随一起变化
  • 点击小圆圈，可以播放相应图片
  • 鼠标不经过轮播图，轮播图也会自动播放图片
  • 鼠标经过，轮播图模块，自动播放停止

es5写法

  1. window.addEventListener("load", function () {
  2.   var prev = this.document.querySelector(".prev");
  3.   var next = this.document.querySelector(".next");
  4.   var outer = this.document.querySelector("#outer");
  5.   //需求1 鼠标移入，左右按钮出现隐藏
  6.   outer.addEventListener("mouseenter", function () {
  7.     prev.style.display = "block";
  8.     next.style.display = "block";
  9.   });
  10.   outer.addEventListener("mouseleave", function () {
  11.     prev.style.display = "none";
  12.     next.style.display = "none";
  13.   });
  15.   //需求2 动态生成pot，小圆圈
  16.   // 2.1、获取元素
  17.   var ulL = outer.querySelector("ul");
  18.   var dot = outer.querySelector(".dot");
  19.   for (var i = 0; i < ulL.children.length; i++) {
  20.     // 2.2、动态的创建a标签
  21.     var a = this.document.createElement("a");
  22.     // 给a添加索引，方便下面计算点击圆圈，移动图片
  23.     a.setAttribute("index", i);
  24.     // 2.3 插入节点
  25.     dot.appendChild(a);
  26.   }
  27.   // 2.4 给第一个小点，设置选中样式
  28.   dot.children[0].className = "active";
  30.   //需求3  给点击的小圆圈加上类名 active  排他思想
  31.   var as = dot.querySelectorAll("a");
  32.   for (var i = 0; i < as.length; i++) {
  33.     as[i].addEventListener("click", function () {
  34.       for (var j = 0; j < as.length; j++) {
  35.         dot.children[j].className = "";
  36.       }
  37.       this.className = "active";
  39.       //需求4   点击小圆圈，移动图片 move(obj, attr, target, speed, callback)
  40.       //4.1  获取点击a的索引，这个索引是创建a时添加的，用来表示每个a
  41.       var index = this.getAttribute("index");
  42.       // 4.2 ulL的移动距离，小圆圈的索引号*图片的宽度
  43.       animation(ulL, -index * 590);
  44.       // move(ulL, "left", -index * 590, 10);
  45.       // 获取到index后，需要同步赋值给下面的num跟current
  47.       // 以便可以同步小圆点，跟点击下一张的变化
  48.       num = index;
  49.       current = index;
  50.     });
  51.   }
  52.   // 克隆第一张图片,不在结构里加
  53.   // 循环生成小圆点的时候，还没有克隆这个图片。所有不会自动生成的小圆圈
  54.   var firstImg = ulL.children[0].cloneNode(true);
  55.   ulL.appendChild(firstImg);
  57.   //需求5  点击左右按钮，实现上下一张切换
  58.   var num = 0;
  59.   var current = 0; //用来标记小圆圈
  60.   next.addEventListener("click", function () {
  61.     //无缝滚动  如果走到了最后一张图片，此时我们的ul要快速复原left改为0
  62.     if (num >= ulL.children.length - 1) {
  63.       ulL.style.left = 0;
  64.       num = 0;
  65.     }
  66.     num++;
  67.     animation(ulL, -num * 590);
  68.     // move(ulL, "left", -num * 590, 20);
  70.     // 点击右侧按钮，小圆圈跟着跳动
  71.     current++;
  72.     // 如果curent的数值跟小圆圈的数量一样，走到了克隆的那张图片，要还原为0
  73.     if (current == dot.children.length) {
  74.       current = 0;
  75.     }
  76.     for (var i = 0; i < dot.children.length; i++) {
  77.       dot.children[i].className = "";
  78.     }
  79.     dot.children[current].className = "active";
  80.   });
  82.   //需求6  左侧按钮的功能
  83.   prev.addEventListener("click", function () {
  84.     if (num == 0) {
  85.       num = ulL.children.length - 1;
  86.       ulL.style.left = -num * 590 + "px";
  87.     }
  88.     num--;
  89.     animation(ulL, -num * 590);
  90.     // move(ulL, "left", -num * 590, 20);
  91.     // 点击右侧按钮，小圆圈跟着跳动
  92.     current--;
  93.     // 如果curent的数值跟小圆圈的数量一样，要还原为0
  94.     if (current < 0) {
  95.       current = dot.children.length - 1;
  96.     }
  97.     for (var i = 0; i < dot.children.length; i++) {
  98.       dot.children[i].className = "";
  99.     }
  100.     dot.children[current].className = "active";
  101.   });
  103.   //需求7  自动播放功能
  104.   var timer = setInterval(function () {
  105.     // 手动调用点击事件
  106.     next.click();
  107.   }, 2000);
  108.   
  109.   //需求8  鼠标移入，自动播放停止
  110.   outer.addEventListener("mouseenter", function () {
  111.     clearInterval(timer);
  112.     timer = null;
  113.   });
  115.   //需求9  鼠标移出，重新开启定时器
  116.   outer.addEventListener("mouseleave", function () {
  117.     timer = setInterval(function () {
  118.       // 手动调用点击事件
  119.       next.click();
  120.     }, 2000);
  121.   });
  122. });

（3）、es6写法

  1. window.onload = function () {
  2.   var that;
  3.   class Swiper {
  4.     constructor() {
  5.       // 保存this
  6.       that = this;
  7.       // 1.1 获取对应元素
  8.       this.prev = document.querySelector(".prev");
  9.       this.next = document.querySelector(".next");
  10.       this.outer = document.querySelector("#outer");
  11.       //2.1 获取导航点父元素
  12.       this.dot = document.querySelector(".dot");
  13.       this.imgList = document.querySelector(".imgList");
  14.       //   2.4 调用创建小圆点函数
  15.       this.creatDot();
  16.       //   3.1 获取图片导航小圆点
  17.       this.dots = document.querySelectorAll(".dot a");
  18.       //   4.1 用于标识当前的图片位置
  19.       this.num = 0;
  20.       this.current = 0; //用于标识当前小圆点的位置
  21.       //   5、克隆轮播图第一张照片
  22.       this.cloneFirstImg();
  24.       // 调用监听函数
  25.       this.addevent();
  26.     }
  27.     // 所有监听函数
  28.     addevent() {
  29.       console.log(this);
  30.       // 1.2 监听鼠标是否移入
  31.       this.outer.addEventListener("mouseenter", that.pervNextShow);
  32.       this.outer.addEventListener("mouseleave", that.pervNextNode);
  33.       //  3.3 监听是否点击了小圆点
  34.       for (var i = 0; i < this.dots.length; i++) {
  35.         // 保存i值，方便找对应的图片
  36.         this.dots[i].index = i;
  37.         // 默认第一个按钮为选中状态
  38.         this.dots[0].className = "active";
  39.         // 点击切换背景色
  40.         this.dots[i].addEventListener("click", that.updatBackgroundColor);
  41.         // 点击切换图片
  42.         this.dots[i].addEventListener("click", that.updatImg);
  43.       }
  44.       //   4、点击next
  45.       this.next.addEventListener("click", that.nextFun);
  46.       //   5、点击prev
  47.       this.prev.addEventListener("click", that.prevFun);
  48.       //   8、调用自动轮播函数
  49.       this.timer = null; //定义标识定时器
  50.       this.autoPlay();
  51.       // 9、移入outer，暂停自动轮播
  52.       this.outer.addEventListener("mouseenter", that.stopAutoPlay);
  53.       //   10、移出outer，继续自动轮播
  54.       this.outer.addEventListener("mouseleave", that.startAutoPlay);
  55.     }
  56.     // 所有功能函数
  57.     // 注意函数中的this指向
  58.     // 1.3 上下一张出现
  59.     pervNextShow() {
  60.       that.prev.style.display = "block";
  61.       that.next.style.display = "block";
  62.     }
  63.     pervNextNode() {
  64.       that.prev.style.display = "none";
  65.       that.next.style.display = "none";
  66.     }
  67.     // 2、根据图片创建导航点
  68.     creatDot() {
  69.       var imgNum = this.imgList.children.length;
  70.       for (var i = 0; i < imgNum; i++) {
  71.         var a = `<a href="#" ></a>`;
  72.         this.dot.insertAdjacentHTML("afterBegin", a);
  73.       }
  74.     }
  75.     // 3.4 点击小圆点，切换颜色
  76.     updatBackgroundColor(e) {
  77.       // （1）、先解决默认行为，超链接跳转的问题
  78.       e.preventDefault();
  79.       //  (2)、点击颜色切换
  80.       for (var i = 0; i < that.dots.length; i++) {
  81.         that.dots[i].className = "";
  82.       }
  83.       this.className = "active";
  84.     }
  86.     // 3.5 点击小圆点，切换图片
  87.     updatImg() {
  88.       //  (3)、根据图片导航点的索引移动图片
  89.       animation(that.imgList, -590 * this.index);
  90.     }
  92.     // 4、点击下一张，切换图片
  93.     nextFun() {
  94.       // 根据num的值，判断num是否++
  95.       var len = that.imgList.children.length;
  96.       if (that.num >= len - 1) {
  97.         that.imgList.style.left = 0;
  98.         that.num = 0;
  99.       }
  100.       that.num++;
  102.       animation(that.imgList, -that.num * 590);
  104.       // 点击下一张照片后，更换小圆点背景色
  105.       that.current++;
  106.       if (that.current == that.dots.length) that.current = 0;
  107.       //调用更换小圆点颜色函数
  108.       that.changeBackgroundColor();
  109.     }
  110.     // 5、为解决轮播图最后一张快速问题，多赋值一张照片
  111.     cloneFirstImg() {
  112.       var firstImg = that.imgList.children[0].cloneNode(true);
  113.       that.imgList.appendChild(firstImg);
  114.     }
  115.     // 6、更换小圆点颜色
  116.     changeBackgroundColor() {
  117.       for (var i = 0; i < that.dots.length; i++) {
  118.         that.dots[i].className = "";
  119.       }
  120.       that.dots[that.current].className = "active";
  121.     }
  122.     // 7、点击prev，上一张照片
  123.     prevFun() {
  124.       // 根据num的值，判断显示图片
  125.       if (that.num == 0) {
  126.         that.num = that.imgList.children.length - 1;
  127.         that.imgList.style.left = -that.num * 590 + "px";
  128.       }
  129.       that.num--;
  130.       animation(that.imgList, -that.num * 590);
  131.       //  同步图片小圆点的背景色
  132.       if (that.current <= 0) {
  133.         that.current = that.dots.length;
  134.       }
  135.       that.current--;
  136.       //调用更换小圆点颜色函数
  137.       that.changeBackgroundColor();
  138.     }
  139.     // 8、自动轮播，每隔2s，调动一次next函数
  140.     autoPlay() {
  141.       that.timer = setInterval(function () {
  142.         that.nextFun();
  143.       }, 2000);
  144.     }
  145.     // 9、鼠标移入轮播图，停止自动轮播
  146.     stopAutoPlay() {
  147.       //   console.log(that.timer);
  148.       clearInterval(that.timer);
  149.       that.timer = null;
  150.     }
  151.     // 10、鼠标移出轮播图，开始自动轮播
  152.     startAutoPlay() {
  153.       that.autoPlay();
  154.     }
  155.   }
  156.   new Swiper();
  157. };

（4）、节流阀优化

防止轮播图按钮连续点击造成播放过快

节流阀目的，当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发

核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

开始设置一个变量 var flag =true

if（flag）{ flag = false,do something} 关闭水龙头

利用回调函数动画执行完毕， falg=true 打开水龙头

  1.   // 10、节流阀优化点击过快问题
  2.   var flag = true;
  3.   next.addEventListener("click", function () {
  4.     if (flag) {
  5.       flag = false; // 关闭水龙头
  6.       //无缝滚动  如果走到了最后一张图片，此时我们的ul要快速复原left改为0
  7.       if (num >= ulL.children.length - 1) {
  8.         ulL.style.left = 0;
  9.         num = 0;
  10.       }
  11.       num++;
  12.       animation(ulL, -num * 590, function () {
  13.         flag = true;
  14.       });
  15.       // move(ulL, "left", -num * 590, 20);
  17.       // 点击右侧按钮，小圆圈跟着跳动
  18.       current++;
  19.       // 如果curent的数值跟小圆圈的数量一样，走到了克隆的那张图片，要还原为0
  20.       if (current == dot.children.length) {
  21.         current = 0;
  22.       }
  23.       for (var i = 0; i < dot.children.length; i++) {
  24.         dot.children[i].className = "";
  25.       }
  26.       dot.children[current].className = "active";
  27.     }
  28.   });
  30.   //需求6  左侧按钮的功能
  31.   prev.addEventListener("click", function () {
  32.     if (flag) {
  33.       flag = false;
  34.       if (num == 0) {
  35.         num = ulL.children.length - 1;
  36.         ulL.style.left = -num * 590 + "px";
  37.       }
  38.       num--;
  39.       animation(ulL, -num * 590, function () {
  40.         flag = true;
  41.       });
  42.       // move(ulL, "left", -num * 590, 20);
  43.       // 点击右侧按钮，小圆圈跟着跳动
  44.       current--;
  45.       // 如果curent的数值跟小圆圈的数量一样，要还原为0
  46.       if (current < 0) {
  47.         current = dot.children.length - 1;
  48.       }
  49.       for (var i = 0; i < dot.children.length; i++) {
  50.         dot.children[i].className = "";
  51.       }
  52.       dot.children[current].className = "active";
  53.     }
  54.   });

标签： javascript 交互 开发语言
本文转载自: https://blog.csdn.net/qq_60060362/article/details/143851924
版权归原作者 好开心33 所有， 如有侵权，请联系我们删除。
登录后发布评论

“javaScript交互案例”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。