JS学习笔记(day12)

最新推荐文章于 2024-06-14 15:02:13 发布

苦逼的猿宝

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量51

点赞数

分类专栏： js 文章标签： javascript 前端学习 Powered by 金山文档

本文链接：https://blog.csdn.net/GAGGAAAAA/article/details/129306836

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Day12(面向对象)

一、回调函数 call back

含义：当我们把一个函数A当成一个参数传给函数B 这个函数A就是回调函数

    function B(cb){
        console.log(cb)
        // 调用cb其实就是在调用A
    }
    function A(){

    }
    // 这个函数A不是由我们直接使用

    B(A)

二、面向对象

面向对象--> 关注对象

编程思想

面向过程

关注每一步的实现

面向对象

封装、继承、多态

核心思想：创建一个对象利用这个创建出来的对象解决问题

js面向对象思维

Date Array

对象：

用字面量或者内置构造函数的方式创建对象

使用工厂函数创建对象

只要调用这个函数可以返回一个数据

自定义构造函数创建对象

三、new调用和直接调用的区别（作用）

  - new在调用函数的时候会在函数内部自动创建一个对象
  - 将函数内部的this指向到这个创建出来的对象
  - new在调用函数结束的时候会自动返回一个对象

四、构造函数

  - 利用new来调用的函数被称为构造函数

五、swiper插件

https://swiper.com.cn/
详细使用看官网介绍

六、基本轮播图

注意事项：使用只需要更改图片的位置就可以

<!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" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .wrap {
        position: relative;
        width: 590px;
        height: 470px;
        margin: 0 auto;
        border: 1px solid #ddd;
      }
      .wrap .img-list {
        width: 100%;
        height: 100%;
      }
      .wrap .img-list .img-list-item {
        display: none; /* 隐藏所有 */
        width: 100%;
        height: 100%;
      }
      .wrap .img-list .img-list-item:nth-child(1) {
        display: block; /* 显示第一张 */
      }
      .wrap .img-list .img-list-item img {
        width: 100%;
        height: 100%;
      }
      .wrap .img-dots {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
      }
      .wrap .img-dots li {
        width: 10px;
        height: 10px;
        border: 1px solid #fff;
        border-radius: 10px;
        margin: 0 3px;
        cursor: pointer;
      }
      .wrap .img-dots li.active {
        background-color: orange;
      }
      .wrap .img-btns .left-btn {
        position: absolute;
        left: 0;
        top: 50%;
        font-size: 30px;
      }
      .wrap .img-btns .right-btn {
        position: absolute;
        right: 0;
        top: 50%;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <!-- 图片的部分 -->
      <div class="img-list">
        <div class="img-list-item">
          <img src="./img/1.jpg" alt="" />
        </div>
        <div class="img-list-item">
          <img src="./img/3.jpg" alt="" />
        </div>
        <div class="img-list-item">
          <img src="./img/4.jpg" alt="" />
        </div>
        <div class="img-list-item">
          <img src="./img/5.jpg" alt="" />
        </div>
        <div class="img-list-item">
          <img src="./img/6.jpg" alt="" />
        </div>
      </div>
      <!-- 点的部分 -->
      <ul class="img-dots">
        <!-- 动态生成 -->
      </ul>
      <!-- 左右箭头部分 -->
      <div class="img-btns">
        <button class="left-btn">左</button>
        <button class="right-btn">右</button>
      </div>
    </div>
    <script>
      // 获取所有的图片
      var imgs = document.querySelectorAll(".img-list-item");

      // 根据图片的长度生成点
      var len = imgs.length;
      for (let i = 0; i < len; i++) {
        var newDot = document.createElement("li");
        if (i === 0) newDot.classList.add("active"); // 默认第一个点激活
        document.querySelector(".img-dots").appendChild(newDot);
      }
      // 获取所有的点
      var dots = document.querySelectorAll(".img-dots li");
      console.log(dots);
      // 使用变量表示当前显示哪一张图片
      var index = 0;
      // 点击左右箭头切换图片
      document.querySelector(".right-btn").onclick = function () {
        index++;
        console.log(index);
        if (index === len) {
          index = 0; // 到达最后一张返回第一张
        }
        // 隐藏所有
        for (let i = 0; i < len; i++) {
          imgs[i].style.display = "none";
          dots[i].classList.remove("active");
        }
        // 显示当前
        imgs[index].style.display = "block";
        // 让对应的点加激活色
        dots[index].classList.add("active");
      };

      // 点击点跳转到对应的图片
      for (let i = 0; i < dots.length; i++) {
        dots[i].onclick = function () {
          // 获取到点的索引
          // 把点击点的索引赋值给图片
          index = i;
          // 隐藏所有
          for (let i = 0; i < len; i++) {
            imgs[i].style.display = "none";
            dots[i].classList.remove("active");
          }
          // 显示当前
          imgs[index].style.display = "block";
          // 让对应的点加激活色
          dots[index].classList.add("active");
        };
      }
      /* 自动轮播图 */
      let id = setInterval(() => {
        index++;
        console.log(index);
        if (index === len) {
          index = 0; // 到达最后一张返回第一张
        }
        // 隐藏所有
        for (let i = 0; i < len; i++) {
          imgs[i].style.display = "none";
          dots[i].classList.remove("active");
        }
        // 显示当前
        imgs[index].style.display = "block";
        // 让对应的点加激活色
        dots[index].classList.add("active");
      }, 1000);

      // 鼠标移入停止轮播
      document.querySelector(".wrap").onmouseover = function () {
        clearInterval(id);
      };
      // 鼠标移出再次轮播
      document.querySelector(".wrap").onmouseout = function () {
        id = setInterval(() => {
          index++;
          console.log(index);
          if (index === len) {
            index = 0; // 到达最后一张返回第一张
          }
          // 隐藏所有
          for (let i = 0; i < len; i++) {
            imgs[i].style.display = "none";
            dots[i].classList.remove("active");
          }
          // 显示当前
          imgs[index].style.display = "block";
          // 让对应的点加激活色
          dots[index].classList.add("active");
        }, 1000);
      };
    </script>
  </body>
</html>