轮播图实例

<!DOCTYPE html>
<html lang="zh-CN">
<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;
            box-sizing: border-box;
        }
        .slideshow {
            width: 240px;
            height: 360px;
        }
        .slideshow .imgs {
            width: inherit;
            height: inherit;
        }
        .slideshow img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            /* 默认情况下需要全部隐藏 */
            display: none;
        }
        /* 当class有active的属性时,为激活状态 显示图片 */
        .slideshow img.active {
            display: block;
        }
        /* 当鼠标悬停时,有点击模样 */
        .slideshow img:hover {
            cursor: pointer;
        }
        .slideshow .btns {
            display: flex;
            place-content: center;
            transform: translateY(-40px);
        }
        .slideshow span {
            height: 16px;
            width: 16px;
            /* 未激活属于透明状态 */
            background-color: rgba(233, 233, 233, 0.5);
            margin: 5px;
            border-radius: 50%;
        }
        .slideshow span.active {
            /* 激活状态给个颜色 */
            background-color: orangered;
        }
        .slideshow span:hover {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="slideshow">
        <!-- 1. 图片容器 -->
        <div class="imgs">
            <!-- <img src="./1111/slideshow/static/images/item1.jpeg" alt="" class="active" />
            <img src="./1111/slideshow/static/images/item2.jpeg" alt="" />
            <img src="./1111/slideshow/static/images/item3.jpeg" alt="" /> -->
        </div>
        <!-- 2. 按钮容器 -->
        <div class="btns">
            <!-- <span class="active"></span>
            <span></span>
            <span></span> -->
        </div>
    </div>
    <script type="module">
        import { createImgs, createBtns, switchImg, timePlay } from '/pic.js';
        // 拿到容器 方便以下直接使用
        const imgs = document.querySelector('.imgs');
        const btns = document.querySelector('.btns');
          //网站一加载 就开始运行这些js
        window.onload = function () {
            // 创建图片组
            createImgs(imgs)
            // 创建按钮组
            createBtns(imgs, btns)
            //btns.children是个类数组,用...转换成数组 使用foreach 让每个按钮都绑定上点击事件
            const arrbtn = [...btns.children];
            arrbtn.forEach(function (btn) {
                btn.onclick = function () {
                    switchImg(this, imgs)
                }
            })
            const btnArr = [...btns.children];
            // 按钮索引的数组
            const btnKeys = Object.keys(btns.children);
            setInterval(
                function (btnArr, btnKeys) {
                    timePlay(btnArr, btnKeys);
                },
                1000,
                btnArr,
                btnKeys
            );
        }
    </script>
</body>
</html>

const Arrimg = [
  {
    key: 1,
    url: "http://baidu.com",
    src: "./1111/slideshow/static/images/item1.jpeg",
  },
  {
    key: 2,
    url: "http://baidu.com",
    src: "./1111/slideshow/static/images/item2.jpeg",
  },
  {
    key: 3,
    url: "http://baidu.com",
    src: "./1111/slideshow/static/images/item3.jpeg",
  },
];
// 创建图片
function createImgs(imgs) {
  // 创建局部代码片段
  const frag = new DocumentFragment();
  for (let i = 0; i < Arrimg.length; i++) {
    // 创建img
    const img = document.createElement("img");
    img.src = Arrimg[i].src;
    img.dataset.key = Arrimg[i].key;
    // 让第一个img处于激活状态
    if (i === 0) {
      img.classList.add("active");
    }
    //给每个图片绑定上一个点击事件
    img.onclick = function () {
      location.href = Arrimg[i].url;
    };
    // 把每个img加入到临时代码片段中
    frag.append(img);
  }
  // 加入到图片容器
  imgs.append(frag);
}
// 创建按钮 有多少图片 就要创建多少按钮
function createBtns(imgs, btns) {
  // 数组长度 就是按钮的个数
  let length = Arrimg.length;
  for (let i = 0; i < length; i++) {
    // 创建按钮元素
    const btn = document.createElement("span");
    // 让按钮的key 和 图片的key 一一对应
    btn.dataset.key =
      imgs.children[i].dataset.key;
      // 同样 让第一个按钮处于激活状态
    if (i === 0) {
      btn.classList.add("active");
    }
    // 把每个btn 加入到按钮容器中
    btns.append(btn);
  }
}
//  创建按钮点击事件 切换激活状态
function switchImg(btn, imgs) {
  // 先让所有按钮的激活状态全部取消
  [...btn.parentNode.children].forEach(btn =>
    btn.classList.remove("active")
  );
  [...imgs.children].forEach(img =>
    img.classList.remove("active")
  );
  // 2. 将当前的按钮处于激活状态
  btn.classList.add("active");
  // 3. 根据按钮索引,找到对应的图片
  const currImg = [...imgs.children].find(
    function (img) {
      return img.dataset.key == btn.dataset.key;
    }
  );
  currImg.classList.add("active");
}
// 定时播放
function timePlay(btnArr, btnKeys) {
  // 1. 头部取一个
  let key = btnKeys.shift();
  // 2. 根据索引找到对应的按钮,再给它自动派发一个点击事件
  btnArr[key].dispatchEvent(new Event("click"));
  // 3. 把刚才到出的按钮再从尾部进入,实现首尾相连
  btnKeys.push(key);
}
export { createImgs, createBtns, switchImg ,timePlay};

相关文章