堆叠式轮播图

最新推荐文章于 2024-05-21 22:35:14 发布

Whnist

最新推荐文章于 2024-05-21 22:35:14 发布

阅读量2.3k

点赞数 5

文章标签： css html css3

本文链接：https://blog.csdn.net/Meg_Fu/article/details/128652018

版权

内容
1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示;当鼠标放在图片上方时，停止轮播，并且左右箭头会显示;
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上;
3.点击左右箭头可以进行左右图片的切换;
4.图片上需有介绍的文字，会随图片切换一起进行切换。
实验原理
计时器使图片滚动
绑定按钮使图片根据点击运动
对图片设置优先级，使图片堆叠
HTML

<!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="./main.css" />
    <script src="./main.js"></script>
  </head>
  <body>
    <div class="out">
      <div class="inner">
        <div class="img">
          <img src="./imgs/1.jpg" alt="" />
        </div>
        <div class="img">
          <img src="./imgs/2.jpg" alt="" />
        </div>
        <div class="img">
          <img src="./imgs/3.jpg" alt="" />
        </div>
        <div class="img">
          <img src="./imgs/4.jpg" alt="" />
        </div>
        <div class="img">
          <img src="./imgs/5.jpg" alt="" />
        </div>
        <div class="img">
          <img src="./imgs/6.jpg" alt="" />
        </div>
        <div class="img">
          <img src="./imgs/7.jpg" alt="" />
        </div>
      </div>
      <div class="arrow">
        <i class="left">《</i>
        <i class="right">》</i>
      </div>
      <div class="button">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
    </div>
  </body>
</html>

css

* {
  margin: 0;
  padding: 0;
}
body {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(#1d2b48, #4f4266);
}
.out {
  width: 800px;
  height: 200px;
  position: relative;
  margin: 0 auto;
  top: 100px;
}
.out .inner {
  width: 100%;
  height: 100%;
}
.out .inner .img {
  width: 400px;
  height: 200px;
  position: absolute;
  transition: 0.3s;
}
.out .inner .img img {
  width: 100%;
  height: 100%;
}
.out .arrow {
  font-size: 32px;
}
.out .arrow i {
  position: absolute;
  color: #fff;
  z-index: 9999;
  cursor: pointer;
  top: 84px;
}
.out .arrow .left {
  left: 0;
}
.out .arrow .right {
  left: 780px;
}
.out .button {
  width: 175px;
  height: 15px;
  position: absolute;
  z-index: 9999;
  left: 50%;
  transform: translateX(-50%);
}
.out .button p {
  width: 15px;
  height: 15px;
  float: left;
  margin: 0 5px;
  cursor: pointer;
  background-color: silver;
}
.out .button p:first-child {
  background-color: #1486bb;
}
.out #last {
  transform: translateX(0);
  z-index: 9;
  opacity: 1;
}
.out #first {
  transform: translateX(200px) scale(1.3);
  z-index: 99;
  opacity: 1;
}
.out #second {
  transform: translateX(400px);
  z-index: 9;
  opacity: 1;
}
.out #left {
  transform: translateX(-100px);
  z-index: 1;
  opacity: 0;
}
.out #right {
  transform: translateX(500px);
  z-index: 1;
  opacity: 0;
}

window.onload = () => {
  var img = document.querySelectorAll(".img");
  var left = document.querySelector(".left");
  var right = document.querySelector(".right");
  var buttons = document.querySelectorAll("p");

  //设置一个数组，用来存id
  idArr = ["first", "second", "right", "left", "left", "left", "last"];

  //设置一个变量用来当图片的索引
  var index = 0;

  initialize();

  //设置一个定时器，让图片轮播
  var timer = setInterval(next, 3000);

  //给箭头绑定点击事件
  left.addEventListener("click", prev);
  //当鼠标放到箭头上时，让定时器停止
  left.addEventListener("mouseover", () => {
    clearInterval(timer);
    timer = null;
  });
  //当鼠标离开箭头时，让定时器重新开始
  left.addEventListener("mouseout", () => {
    timer = setInterval(next, 3000);
  });

  right.addEventListener("click", next);
  right.addEventListener("mouseover", () => {
    clearInterval(timer);
    timer = null;
  });
  right.addEventListener("mouseout", () => {
    timer = setInterval(next, 3000);
  });

  //给小方块添加点击事件
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("mousedown", () => {
      //在用户点击的时候关闭定时器
      clearInterval(timer);
      timer = null;
      //这里需要判断用户点击的小方块与当前图片的索引之差，如果
      //大于0，则表明用户需要更换的是后面的图片，反之，表明用户
      //需要更换之前也就是前面的图片
      if (index > i) {
        let x = index - i;
        while (x--) {
          prev();
        }
      } else if (index < i) {
        let x = i - index;
        while (x--) {
          next();
        }
      }
    });
    buttons[i].addEventListener("mousedown", () => {
      timer = setInterval(next, 3000);
      //让图片继续动起来
    })
  }

  //创建切换图片的函数
  function prev() {
    //切换上一张也就是让数组的最后一个元素变成第一个元素
    idArr.push(idArr.shift());
    initialize();
    if (index === 0) {
      index = buttons.length - 1;
    } else {
      index--;
    }
    clearColor();
  }
  function next() {
    //跟上面反过来
    idArr.unshift(idArr.pop());
    initialize();
    if (index === buttons.length - 1) {
      index = 0;
    } else {
      index++;
    }
    clearColor();
  }

  //创建一个函数用来让小方块跟随图片运动
  function clearColor() {
    for (let i = 0; i < buttons.length; i++) {
      buttons[i].style.backgroundColor = "silver";
    }
    //让当前的索引变色
    buttons[index].style.backgroundColor = "rgb(20, 134, 187)";
  }

  //创建一个函数用来初始化图片
  function initialize() {
    for (let i = 0; i < img.length; i++) {
      img[i].id = idArr[i];
    }
  }
};

实验效果

堆叠式轮播图

Whnist

关注

5
点赞
踩
23

收藏

觉得还不错? 一键收藏
1
评论
堆叠式轮播图

1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示;当鼠标放在图片上方时，停止轮播，并且左右箭头会显示;2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上;4.图片上需有介绍的文字，会随图片切换一起进行切换。3.点击左右箭头可以进行左右图片的切换;对图片设置优先级，使图片堆叠。绑定按钮使图片根据点击运动。
复制链接

扫一扫