原生javascript堆叠式轮播图

最新推荐文章于 2023-10-01 22:23:33 发布

awk_bioinfo

最新推荐文章于 2023-10-01 22:23:33 发布

阅读量1.6k

点赞数 2

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

原文链接：https://www.bilibili.com/video/BV13Y411G7kC?from=search&seid=13943543835924730171&spm_id_from=333.337.0.0

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

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="../fa/css/all.css" />
    <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.png" alt="" />
        </div>
        <div class="img">
          <img src="./imgs/2.png" alt="" />
        </div>
        <div class="img">
          <img src="./imgs/3.png" alt="" />
        </div>
        <div class="img">
          <img src="./imgs/4.png" alt="" />
        </div>
        <div class="img">
          <img src="./imgs/5.png" alt="" />
        </div>
        <div class="img">
          <img src="./imgs/6.png" alt="" />
        </div>
        <div class="img">
          <img src="./imgs/7.png" alt="" />
        </div>
      </div>
      <div class="arrow">
        <i class="fas fa-chevron-left left"></i>
        <i class="fas fa-chevron-right 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: 0px;
  padding: 0px;
}
body {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(#1d2b46,#4f4266);
}

.out {
  height: 200px;
  width: 800px;
  position: relative;
  margin: 0 auto;
  top: 100px;
}
.inner {
  width: 100%;
  height: 100%;
}
.img {
  width: 400px;
  height: 200px;
  position: absolute;
  transition: 0.3s;
}
img {
  width: 100%;
  height: 100%;
}
.arrow {
  font-size: 34px;
}
.arrow i {
  position: absolute;
  color: #fff;
  z-index: 9999;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.button {
  width: 175px;
  height: 15px;
  position: absolute;
  z-index: 9999;
  left: 50%;
  transform: translateX(-50%);
}
.button p {
  width: 15px;
  height: 15px;
  float: left;
  margin: 0 5px;
  cursor: pointer;
  background-color: silver;
}

.button p:first-child {
  background-color: rgb(20,134,187);
}

/* 设置id样式 */
#last {
  transform: translateX(0);
  z-index: 9;
  opacity: 1;
}
#first {
  transform: translateX(200px) scale(1.3);
  z-index: 99;
  opacity: 1;
}
#second {
  transform: translateX(400px);
  z-index: 9;
  opacity: 1;
}
#left {
  transform: translateX(-100px);
  z-index: 1;
  opacity: 0;
}
#right {
  transform: translateX(500px);
  z-index: 1;
  opacity: 0;
}

javascript代码：

window.onload = () => {
  var img = document.querySelectorAll('.out .inner .img');
  var left = document.querySelector('.arrow .left');
  var right = document.querySelector('.arrow .right');
  var button = document.querySelectorAll('.button p');
  var inner = document.querySelector('.inner');
  var index=0;
  var timer=null;

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

  initialize();

  // 设置一个定时器，让图片轮播
  function start(){
    timer = setInterval(next, 3000);
  }
  // 创建切换图片的函数
  function prev(){
    clearInterval(timer);
    // 切换上一张也就是让数组的最后一个元素变成第一个元素
    idArr.push(idArr.shift());
    initialize();
    if(index<=0){
      index=img.length-1;
    }else{
      index--;
    }
    clearColor();
    start();
  }
  function next(){
    clearInterval(timer);
    // 切换上一张也就是让数组的最后一个元素变成第一个元素
    idArr.unshift(idArr.pop());
    initialize();
    if(index>=img.length-1){
      index=0;
    }else{
      index++;
    }
    clearColor();
    start();
  }
  
  left.addEventListener('click',prev)
  right.addEventListener('click',next)
  inner.addEventListener('mouseover',() => {clearInterval(timer);})
  inner.addEventListener('mouseout',start)

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

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

  start(); // 开启定时器
}

参考：
素材来源于B站: https://www.bilibili.com/video/BV13Y411G7kC?from=search&seid=13943543835924730171&spm_id_from=333.337.0.0,加入了自己的理解和改动。

awk_bioinfo

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
原生javascript堆叠式轮播图

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" />
复制链接

扫一扫