仿真轮播图

最新推荐文章于 2024-07-18 17:34:14 发布

javascript高级程序员

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量131

点赞数

分类专栏：新手文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_42507764/article/details/128052480

版权

新手专栏收录该内容

18 篇文章 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>咪咕音乐</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body{
        background-color: black;
      }
      #swiper {
        position: relative;
      }
      .swiper {
        width: 1400px;
        height: 380px;
        margin: 0 auto;
        position: relative;
      }
      .swiperItem {
        width: 1400px;
        height: 350px;
        position: absolute;
        transition: .5s;
        box-shadow: 0 0 15px #b0b0b0;
        border-radius: 10px;
        overflow: hidden;
      }
      .swiperItem > img {
        width: 1400px;
        height: 350px;
        display: block;
      }
      /* 隐藏状态 */
      .def {
        opacity: 0;
        z-index: -1;
        transform:perspective(500px) translateZ(-250px);
      }
      .c {
        opacity: 1;
        /* 这张是靠左显示的 */
        z-index: 1;
        transform: perspective(500px) translateZ(-230px) translateX(230px);
      }
      .a {
        opacity: 1;
        /* 这张是靠左显示的 */
        z-index: 1;
        transform: perspective(500px) translateZ(-230px) translateX(-230px);
      }
      .b {
        opacity: 1;
        /* 这张是靠左显示的 */
        z-index: 999;
        transform: perspective(500px) translateZ(-100px) translateX(0px);
      }
      /*按钮*/
      .btn {
        position: absolute;
        width: 51px;
        height: 100px;
        top: 34%;
      }
      .btn_left {
        left: 0;
        background-image: url(./img/btn-left.png);
      }
      .btn_right {
        right: 0;
        background-image: url(./img/btn-right.png);
      }
      .btn_left:hover {
        background-image: url(./img/btn-left-hover.png);
      }
      .btn_right:hover {
        background-image: url(./img/btn-right-hover.png);
      }

      .ponts{
        width: 200px;
        height: 4px;
        margin: 0 auto;
        display:flex;
        justify-content: space-around;
      }
      .ponts a{
        width: 15px;
        height: 4px;
        background-color: #b0b0b0;
        border-radius: 2px;
      }
      /* 定义俩种状态 */
      .ponts .show{
         background-color: aqua;
      }
      .ponts .hidden{
         background-color:#b0b0b0;
      }
    </style>
  </head>
  <body>
    <!-- 写俩swiper 一个内层的一个外层的 
      需求解读
            默认状态
            显示最前面
            显示最后面
            正常就是不显示的
     -->
    <div id="swiper">
      <div class="swiper">
        <div class="swiperItem b">
          <a href="#">
            <img src="./img/01.jpg" alt="" />
          </a>
        </div>
        <div class="swiperItem c">
          <a href="#">
            <img src="./img/02.jpg" alt="" />
          </a>
        </div>
        <div class="swiperItem def">
          <a href="#">
            <img src="./img/03.jpg" alt="" />
          </a>
        </div>
        <div class="swiperItem def">
          <a href="#">
            <img src="./img/04.jpg" alt="" />
          </a>
        </div>
        <div class="swiperItem def">
          <a href="#">
            <img src="./img/05.jpg" alt="" />
          </a>
        </div>
        <div class="swiperItem def">
          <a href="#">
            <img src="./img/06.jpg" alt="" />
          </a>
        </div>
        <div class="swiperItem a">
          <a href="#">
            <img src="./img/07.jpg" alt="" />
          </a>
        </div>
      </div>
      <!-- 轮播图左右的按钮 -->
      <a href="#" class="btn btn_left"></a>
      <a href="#" class="btn btn_right"></a>
      <div class="ponts">
         <a href="#" class="show"></a>
         <a href="#" class="hidden"></a>
         <a href="#" class="hidden"></a>
         <a href="#" class="hidden"></a>
         <a href="#" class="hidden"></a>
         <a href="#" class="hidden"></a>
         <a href="#" class="hidden"></a>
      </div>
    </div>
    <script src="./轮播图.js"></script>
  </body>
</html>

//先获取所有的元素
//需求分析
//第一步先来进行轮播
//点击悬浮停止轮播
//点击图片也可以切换

//先进行轮播

//获取父容器的
let swiper = document.querySelector("#swiper");

//获取swiperItem 获取小的
let swiperItem = document.querySelectorAll(".swiperItem");
//获取a标签
//获取轮播图小点
let points = document.querySelectorAll(".ponts a");
let btn_left = document.querySelector(".btn_left");
let btn_right = document.querySelector(".btn_right");
let nowIndex = 0; //定义默认下标是通过默认下标进行匹配的
let timer; //计时器对象
//定义轮播方法
swiperPlay();
function swiperPlay() {
  clearInterval(timer);
  timer = setInterval(() => {
    nowIndex++;
    if (nowIndex === swiperItem.length) {
      nowIndex = 0;
    }
    changeAll();
  }, 2000);
}

//修改图片和小圆点显示效果的方式

function changeAll() {
  //调用修改图片和修改小圆点显示效果的方式
  changeImg();
  changePoint(); //改变小圆点
}

//改图片
function changeImg() {
  //遍历所有的图片
  //让他们呢显示都为def
  for (let i = 0; i < swiperItem.length; i++) {
    //全部设定为默认状态
    swiperItem[i].className = "swiperItem def";

    //判断自定义轮播的情况切换abc
    if (nowIndex === 0) {
      swiperItem[nowIndex].className = "swiperItem b";
      swiperItem[swiperItem.length - 1].className = "swiperItem a";
      swiperItem[nowIndex + 1].className = "swiperItem c";
    } else if (nowIndex === swiperItem.length - 1) {
      swiperItem[nowIndex].className = "swiperItem b";
      swiperItem[nowIndex - 1].className = "swiperItem a";
      swiperItem[0].className = "swiperItem c";
    } else {
      //让后根据当前的下标来进行显示
      swiperItem[nowIndex].className = "swiperItem b";
      swiperItem[nowIndex - 1].className = "swiperItem a";
      swiperItem[nowIndex + 1].className = "swiperItem c";
    }
  }
}

//改变小圆点的方法
function changePoint() {
  for (let m = 0; m < points.length; m++) {
    points[m].className = "hidden";
  }
  points[nowIndex].className = "show";
}
//当我点击的时候需要效果的处理
//轮播图点击效果处理
for (let n = 0; n < points.length; n++) {
  //先给小圆点添加下标
  points[n].index = n;
  points[n].onclick = function () {
    // console.log(this.index);
    //通过下标进行当前nowIndex的定义
    nowIndex = this.index;
    changeAll();
  };
}
//点击图片切换
for (let t = 0; t < swiperItem.length; t++) {
  //先给小圆点添加下标
  swiperItem[t].index = t;
  swiperItem[t].onclick = function () {
    // console.log(this.index);
    //通过下标进行当前nowIndex的定义
    nowIndex = this.index;
    changeAll();
  };
}

//左边按钮
btn_left.onclick = function () {
  nowIndex--;
  if (nowIndex < 0) {
    nowIndex = swiperItem.length - 1;
  }
  changeAll();
};
//右边按钮
btn_right.onclick = function () {
  nowIndex++;
  if (nowIndex === swiperItem.length) {
    nowIndex = 0;
  }
  changeAll();
};
//鼠标悬浮到轮播图上暂停轮播

swiper.onmouseover = function () {
  clearInterval(timer);
};

swiper.onmouseout = function () {
  swiperPlay();
};