JS学习笔记(day12)

Day12(面向对象)

一、回调函数 call back

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

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

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

    B(A)

二、面向对象

  • 面向对象--> 关注对象

  • 编程思想

  • 面向过程

  • 关注每一步的实现

  • 面向对象

  • 封装、继承、多态

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

  • js面向对象思维

  • Date Array

  • 对象:

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

  1. 使用工厂函数创建对象

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

  1. 自定义构造函数创建对象

三、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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苦逼的猿宝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值