渐隐渐显轮播图

我是打工人

于 2022-03-09 08:36:26 发布

阅读量177

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/szydqq/article/details/123359886

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul, ol, li {
      list-style: none;
    }

    .banner {
      width: 600px;
      height: 400px;
      border: 10px solid #333;
      margin: 50px auto;
      position: relative;

      overflow: hidden;
    }

    .imgBox {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .imgBox > li {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;

      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 100px;
      color: #fff;

      opacity: 0;

      transition: opacity 0.5s linear;
    }

    .imgBox > li.active {
      opacity: 1;
    }

    .pointBox {
      width: 200px;
      height: 30px;
      background-color: rgba(0, 0, 0, .5);
      border-radius: 15px;
      position: absolute;
      left: 50%;
      bottom: 30px;
      margin-left: -100px;

      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }

    .pointBox > li {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      cursor: pointer;
    }

    .pointBox > li.active {
      background-color: red;
    }

    .banner:hover > div {
      background-color: rgba(0, 0, 0, .3);
      opacity: 1;
    }

    .banner > div {
      width: 30px;
      height: 50px;
      background-color: rgba(0, 0, 0, 0);
      position: absolute;
      top: 50%;
      margin-top: -25px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
      color: #fff;
      cursor: pointer;

      opacity: 0;
    }

    .banner > div:hover {
      background-color: rgba(0, 0, 0, .5);
    }

    .banner > div.prev {
      left: 0;
      border-radius: 0 25px 25px 0;
    }

    .banner > div.next {
      right: 0;
      border-radius: 25px 0 0 25px;
    }
  </style>
</head>
<body>

  <div class="banner">
    <!-- 承载图片的整体盒子 -->
    <ul class="imgBox">
      <!-- 每一个 li 就是一个小图片盒子 -->
      <li class="active" style="background-color: hotpink;">1</li>
      <li style="background-color: orange;">2</li>
      <li style="background-color: skyblue;">3</li>
      <li style="background-color: purple;">4</li>
      <li style="background-color: cyan;">5</li>
    </ul>

    <!-- 承载焦点的整体盒子 -->
    <ol class="pointBox"></ol>

    <!-- 左右两个按钮 -->
    <div class="prev">&lt;</div>
    <div class="next">&gt;</div>
  </div>

  <script src="./index.js"></script>
</body>
</html>

index。js

// 渐隐渐现轮播图

/*
  1. 设置焦点
    + 和 左右切换 轮播图 是一样的

  2. 切换一张的函数
    + 把切换一张轮播图的过程封装成函数
    + 将来上一张下一张直接调用函数即可
    + 在设计函数的时候, 传递一个参数, 用来表示 x +1 还是 x -1 还是 x = 数值

  3. 自动轮播

  4. 移入移出

  5. 点击事件
*/

/*
  分析:
    + 下一张
      => 当前这一张设置 opacity 为 0, 第 x 张 opacity 设置为 1    x 等于 当前 +1
    + 上一张
      => 当前这一张设置 opacity 为 0, 第 x 张 opacity 设置为 1    x 等于 当前 -1
    + 某一张(x)
      => 当前这一张设置 opacity 为 0, 第 x 张 opacity 设置为 1    x 等于 任意一个数值
*/

// 0. 获取元素
// 0-0. 获取可视区域盒子
const banner = document.querySelector('.banner')
// 0-1. 获取承载图片的大盒子
const imgBox = document.querySelector('.imgBox')
// 0-2. 获取承载焦点的大盒子
const pointBox = document.querySelector('.pointBox')

// 0. 准备变量
// 0-1. 准备一个变量, 表示当前张图片的索引
let index = 0
// 0-2. 准备一个变量, 接受定时器返回值
let timer = 0

// 1. 设置焦点
setPoint()
function setPoint() {
  // 1-1. 拿到有多少个焦点
  const pointNum = imgBox.children.length

  // 1-2. 生成焦点插入
  const frg = document.createDocumentFragment()
  for (let i = 0; i < pointNum; i++) {
    const li = document.createElement('li')
    if (i === 0) li.classList.add('active')
    li.classList.add('point')
    li.dataset.i = i
    frg.appendChild(li)
  }
  pointBox.appendChild(frg)

  // 1-3. 调整宽度
  pointBox.style.width = pointNum * (20 + 10) + 'px'

  // 1-4. 调整 位置
  pointBox.style.marginLeft = pointNum * (20 + 10) * -0.5 + 'px'
}

// 2. 切换一张
// 利用参数
//   true  +1
//   false -1
//   否则  x = 参数
// 将来我们使用这个函数的时候, 只要传递 true 或者 false 或者 数字
function changeOne(type) {
  // 2-1. 让当前这一张消失
  // 目前当前这一张是谁, [index] 这一张
  imgBox.children[index].classList.remove('active')
  // 顺便把焦点干掉
  pointBox.children[index].classList.remove('active')

  // 2-2. 根据 type 参数调整 index
  if (type === true) {
    index++
  } else if (type === false) {
    index--
  } else {
    index = type
  }

  // 2-3. 不能让 index 超出边界
  if (index < 0) index = imgBox.children.length - 1
  if (index > imgBox.children.length - 1) index = 0

  // 2-4. 让下面准备的一张显示
  // 代码执行到这里, index 就表示下一张应该显示的索引了
  imgBox.children[index].classList.add('active')
  // 顺便把焦点干掉
  pointBox.children[index].classList.add('active')
}

// 3. 自动轮播
autoPlay()
function autoPlay() {
  // 3-1. 开启定时器
  timer = setInterval(() => changeOne(true), 2000)
}

// 4. 移入移出
overOut()
function overOut() {
  // 4-1. 移入
  banner.addEventListener('mouseover', () => clearInterval(timer))
  // 4-2. 移出
  banner.addEventListener('mouseout', () => autoPlay())
}

// 5. 点击事件
bindEvent()
function bindEvent() {
  // 5-1. 给banner 进行事件绑定
  banner.addEventListener('click', e => {
    const t = e.target

    // 判断
    if (t.className === 'prev') changeOne(false)

    if (t.className === 'next') changeOne(true)

    if (t.className === 'point') changeOne(t.dataset.i - 0)
  })
}