js轮播淡出效果简单实现

A_Brave

于 2022-01-13 16:58:45 发布

阅读量200

点赞数 1

分类专栏： js功能特效 js 文章标签： javascript

本文链接：https://blog.csdn.net/a_brave/article/details/122477849

版权

js 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

js功能特效

2 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

<!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>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  ul {
    list-style: none;
  }

  .box {
    width: 1200px;
    height: 500px;
    margin: 100px auto;
    position: relative;
  }

  .swiper {
    position: absolute;
  }

  .item {
    width: 1200px;
    height: 500px;
    position: absolute;
    text-align: center;
    line-height: 500px;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    opacity: 0;
    transition: all 1s ease-in;
  }

  .swiper li:nth-child(1) {
    background-color: pink;
  }

  .swiper li:nth-child(2) {
    background-color: blue;
  }

  .swiper li:nth-child(3) {
    background-color: blueviolet;
  }

  .swiper li:nth-child(4) {
    background-color: brown;
  }

  .btn-left {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    width: 50px;
    line-height: 80px;
    background-color: rgba(0, 0, 1, .3);
    border-radius: 8px;
    text-align: center;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    cursor: pointer;
    z-index: 2;
  }

  .btn-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    width: 50px;
    line-height: 80px;
    background-color: rgba(0, 0, 1, .3);
    border-radius: 8px;
    text-align: center;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    cursor: pointer;
    z-index: 2;
  }

  .point-list {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
  }

  .point-item {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 8px;
    transition: all .5s;
    cursor: pointer;
  }

  .point-item.active {
    width: 10px;
    height: 10px;
    transition: all .5s;
  }

  .active {
    z-index: 1;
    /*通过层级进行切换展示*/
    opacity: 1;
  }
</style>

<body>
  <div class="box">
    <ul class="swiper">
      <li class=" item active">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
    </ul>
    <div class="btn-left"><</div>
        <div class="btn-right">></div>
        <ul class="point-list">
        </ul>
  </div>
</body>

</html>
<script>
  let box = document.querySelector('.box')
  let li = document.querySelectorAll('.item')
  let btnLeft = document.querySelector('.btn-left')
  let btnRight = document.querySelector('.btn-right')
  let pointList = document.querySelector('.point-list')
  let index = 0
  let plug = true
  // 循环创建指示器，并绑定click事件
  for (var i = 0; i < li.length; i++) {
    let pointItem = document.createElement('li')
    pointItem.classList.add('point-item')
    if (i === 0) {
      pointItem.classList.add('active')
    }
    pointItem.pointId = i
    pointList.appendChild(pointItem)
    pointItem.onclick = function () {
      clickPoint(pointItem.pointId)
    }

  }
  btnRight.onclick = function () {
    if (plug) {
      plug = false
      // 判断当前是否为最后一项
      index = index === li.length - 1 ? 0 : index + 1
      exclude()
      delay()
    }
  }
  btnLeft.onclick = function () {
    if (plug) {
      plug = false
      index = index === 0 ? li.length - 1 : index - 1
      exclude()
      delay()
    }
  }
  // 点击指示器
  function clickPoint(id) {
    index = id
    exclude()
  }
  // 排他 样式切换
  function exclude() {
    li.forEach(item => {
      item.classList.remove('active')
    })
    Array.from(pointList.children).forEach(item => {
      item.classList.remove('active')
    })
    li[index].classList.add('active')
    pointList.children[index].classList.add('active')
  }
  // 自动切换
  let int = setInterval(setVal, 2000)
  function setVal() {
    index = index === li.length - 1 ? 0 : index + 1
    exclude()
    delay()
  }
  box.onmouseenter = function () {
    clearInterval(int)
  }
  box.onmouseleave = function () {
   int = setInterval(setVal, 2000)
  }
  function delay() {
    return setTimeout(function () {
      plug = true
    }, 800);
  }

</script>