轮播图

作业标题：0715作业
作业内容：模仿课堂源码, 自己动手试着完成轮播图
轮播图
<!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>轮播图</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <!--1. 图片组 -->
    <div class="img-group"></div>
    <img src="" alt="" />
    <!-- 2.图片下部的小按钮 -->
    <div class="btn-group"></div>
    <!-- 3.翻页按钮 -->
    <div class="skip">
      <a class="prev" onclick="prevImg()">&lt;</a>
      <a class="next" onclick="nextImg()">&gt;</a>
    </div>
  </div>
  <script>
    const banners = [
      "banner/images/banner1.jpg",
      "banner/images/banner2.jpg",
      "banner/images/banner3.jpg",
      "banner/images/banner4.jpg",
    ];
    //图片组
    const imgGroup = document.querySelector(".container > .img-group");
    //按钮组
    const btnGroup = document.querySelector(".container > .btn-group");
    //load:窗口加载完成自动执行：自动将所有轮播图加载出来，并自动生成与轮播图数量相同的小按钮
    window.onload = () => {
      //1.生成轮播图所有图片
      createImgs(imgGroup, banners.length);
      //2.生成与轮播图数量对应的小按钮
      createBtns(btnGroup, banners.length);
    };
    //生成图片
    function createImgs(parent, length) {
      //正确的做法，应该是将所有图片，先在内存中创建，然后统一的插入到页面中,这样就只需要渲染一次
      //文档片断元素
      const frag = document.createDocumentFragment();
      for (let i = 0; i < length; i++) {
        const img = document.createElement("img");
        img.src = banners[i];
        img.alt = `banner${i + 1}`;
        //为每一张图片添加一个自定义属性"data-index",用它与小按钮进行绑定
        img.dataset.index = `${i + 1}`;
        if (i === 0) img.classList.add("active");
        //内容中执行了四次
        frag.append(img);
      }
      //页面中只渲染了一次，效率大幅提高
      parent.append(frag);
    }
    //生成按钮
    function createBtns(parent, length) {
      //文档片断元素
      const frag = document.createDocumentFragment();
      for (let i = 0; i < length; i++) {
        const span = document.createElement("span");
        //为每一张图片添加一个自定义属性"data-index",用它与小按钮进行绑定
        span.dataset.index = `${i + 1}`;
        if (i === 0) span.classList.add("active");
        //内容中执行了四次
        span.onclick = showImgs;
        frag.append(span);
      }
      //页面中只渲染了一次，效率大幅提高
      parent.append(frag);
    }
    //按钮事件
    function showImgs(ev) {
      //1.获取所有图片和按钮
      const imgArr = imgGroup.querySelectorAll("img");
      const btnArr = btnGroup.querySelectorAll("span");
      //2.因为我们要根据用户的点击确定当前应该显示哪一个，所以应该将之前的激活全部取消掉
      //但是我们又不知道当前是哪个处于激活状态，全部过一遍
      // btnArr.forEach((item) => {
      //   if (item.classList.contains("active")) item.classList.remove("active");
      // });
      // imgArr.forEach((item) => {
      //   if (item.classList.contains("active")) item.classList.remove("active");
      // });
      //将上面两段代码合并
      [btnArr, imgArr].forEach((items) => {
        items.forEach((item) => {
          if (item.classList.contains("active"))
            item.classList.remove("active");
        });
        //3.再给当前正在点击的按钮添加激活，然后再根据当前的按钮确定应该显示哪一张图片
        ev.target.classList.add("active");
        imgArr.forEach((img) => {
          //这张应该显示的图片的data-index应该与按钮的data-index相等，就显示出来
          if (ev.target.dataset.index === img.dataset.index) {
            img.classList.add("active");
          }
        });
      });
    }
    //向前翻页事件
    function prevImg() {
      //1.当前的图片和当前的按钮
      const currentImg = imgGroup.querySelector("img.active");
      const currentBtn = btnGroup.querySelector("span.active");
      //2.去掉当前图片和按钮的激活方式
      currentImg.classList.remove("active");
      currentBtn.classList.remove("active");
      //3.获取当前图片和按钮的前一个兄弟元素
      const prevImg = currentImg.previousElementSibling;
      const BtnImg = currentBtn.previousElementSibling;
      //4.判断，如果存在前一张图片，就设置为激活
      if (prevImg !== null && BtnImg !== null) {
        prevImg.classList.add("active");
        BtnImg.classList.add("active");
      } else {
        //将最后一张图片设置为激活显示，实现循环显示
        imgGroup.lastElementChild.classList.add("active");
        btnGroup.lastElementChild.classList.add("active");
      }
    }
    //向后翻页事件
    function nextImg() {
      //1.当前的图片和当前的按钮
      const currentImg = imgGroup.querySelector("img.active");
      const currentBtn = btnGroup.querySelector("span.active");
      //2.去掉当前图片和按钮的激活方式
      currentImg.classList.remove("active");
      currentBtn.classList.remove("active");
      //3.获取当前图片和按钮的前一个兄弟元素
      const nextImg = currentImg.nextElementSibling;
      const nextBtn = currentBtn.nextElementSibling;
      //4.判断，如果存在前一张图片，就设置为激活
      if (nextImg !== null && nextBtn !== null) {
        nextImg.classList.add("active");
        nextBtn.classList.add("active");
      } else {
        //将最后一张图片设置为激活显示，实现循环显示
        imgGroup.firstElementChild.classList.add("active");
        btnGroup.firstElementChild.classList.add("active");
      }
    }
    //自动播放
    //事件派发器dispatchEvent
    let timer = null;
    let clickEvent = new Event("click");
    const contains = document.querySelector(".container");
    //鼠标移入时停止自动播放，移出时自动播放
    contains.addEventListener("mouseover", stopPlay);
    contains.addEventListener("mouseout", autoPlay);
    //自动播放
    function autoPlay(ev) {
      //ev:事件对象，在方法总是有效的
      timer = setInterval((ev) => {
        document
          .querySelector(".skip .next")
          .dispatchEvent(clickEvent, nextImg);
      }, 2000);
    }
    //自动停止
    function stopPlay() {
      clearInterval(timer);
    }
  </script>
</body>
</html>
轮播图
轮播图实现

轮播图

更多相关文章

随机推荐
