3d轮播图

最新推荐文章于 2023-05-14 15:53:13 发布

花菜菜力

最新推荐文章于 2023-05-14 15:53:13 发布

阅读量178

点赞数

文章标签： css javascript html5

本文链接：https://blog.csdn.net/weixin_44011462/article/details/119949834

版权

banner效果

页面元素

<body>
  <div class="container">
    <div data-color="radial-gradient(#999,#990100)" class="item left">
      <img src="./image/head/16pic_435365_s.png" alt="">
    </div>
    <div data-color="radial-gradient(#999,#163d13)" class="item middle z-index2">
      <img src="./image/head/16pic_435650_s.png" alt="">
    </div>
    <div data-color="radial-gradient(#999,#1a1822)" class="item rigth">
      <img src="./image/head/16pic_436352_b.png" alt="">
    </div>
  </div>
</body>

样式

<style>
  body{
    background: radial-gradient(#999,#163d13);
  }
  .container{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  img{
    width: 100%;
  }
  .item{
    position: absolute;
    width: 350px;
    height: 380px;
    overflow: hidden;
    border-radius: 20px;
    transition: 0.5s;
    transform-origin: bottom center;
  }
  .left{
    transform:scale(0.6) translateX(-140%);
  }
  .middle{
    transform:scale(1) translateX(0%);
  }
  .rigth{
    transform:scale(0.6) translateX(140%);
  }
  .z-index1{
    z-index: 1 !important;
  }
  .z-index2{
    z-index: 2!important;
  }
</style>

js

<script>
  let itemList = document.getElementsByClassName("item");
  for(let i = 0; i < itemList.length; i++){
    // 事件绑定 使用事件监听或者直降绑定事件都可以

    // 左边元素
    // itemList[i].addEventListener("click", function(){
    //   console.log(this)
    //   this.classList.remove("left","middle","rigth","z-index2","z-index1")
    //   this.classList.add("middle","z-index2")

    //   //获取左侧节点  获取当前元素的前一个元素 , ?? 运算符 表示如果前一个节点没有,就使用获取所以节点的最后一个节点
    //   let leftNode = this.previousElementSibling ?? itemList[itemList.length - 1];
      
    //   leftNode.classList.remove("left","middle","rigth","z-index2","z-index1")
    //   leftNode.classList.add("left","z-index1")

    //   // 获取右侧节点 获取当前元素的x下一个元素
    //   let rightNode = this.nextElementSibling ?? itemList[0];
      
    //   rightNode.classList.remove("left","middle","rigth","z-index2","z-index1")
    //   rightNode.classList.add("rigth","z-index1")
    // })



    itemList[i].onclick = function(){
      this.classList.remove("left","middle","rigth","z-index2","z-index1")
      this.classList.add("middle","z-index2")
      document.body.style.background = this.dataset.color;
      /*
          获取左侧节点 获取当前元素的前一个元素;

          ?? 运算符 表示如果前一个节点没有,就使用获取所有节点的最后一个节点
      */
      let leftNode = this.previousElementSibling ?? itemList[itemList.length - 1];
      
      leftNode.classList.remove("left","middle","rigth","z-index2","z-index1")
      leftNode.classList.add("left","z-index1")

      // 获取右侧节点 获取当前元素的x下一个元素
      let rightNode = this.nextElementSibling ?? itemList[0];
      
      rightNode.classList.remove("left","middle","rigth","z-index2","z-index1")
      rightNode.classList.add("rigth","z-index1")
    }
  }
</script>

花菜菜力

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3d轮播图

banner效果页面元素<body> <div class="container"> <div data-color="radial-gradient(#999,#990100)" class="item left"> <img src="./image/head/16pic_435365_s.png" alt=""> </div> <div data-color="radial-gradient(
复制链接

扫一扫