JS原生轮播

最新推荐文章于 2024-09-09 09:35:48 发布

ilovexiaoming1

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量171

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ilovexiaoming1/article/details/124351629

版权

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>Document</title>
  <script src="./index.js"></script>
</head>
<body>
<div class="container">
  <div class="slide-3d">
    <div class="slide-item first">
      <img src="appcube-tab-img-1@2x.png"/>
    </div>
    <div class="slide-item second right">
      <img src="appcube-tab-img-2@2x.png"/>
    </div>
    <div class="slide-item third">
      <img src="appcube-tab-img-3@2x.png"/>
    </div>
    <div class="slide-item second left">
      <img src="appcube-tab-img-5@2x.png"/>
    </div>
  </div>
</div> 
<style>
  .slide-3d{
    position: relative;
    width: 1000px;
    height: 500px;
    margin:200px auto;
  }
  .slide-item{
    position: absolute;
    top: 0;
    left: 0;
    transition:all 0.5s ease;
  }
  .slide-item.first{
    z-index: 3;
    width: 600px;
    opacity: 1;
    transform:translate3d(200px, 80px,0);
  }
  .slide-item.second{
    z-index: 2;
    width: 400px;
    opacity: 0.6;
  }
  .slide-item.second.right{
    transform: translate3d(0, 138px, 0);
  }
  .slide-item.second.left{
    transform: translate3d(600px, 138px,0);
  }
  .slide-item.third{
    z-index: 1;
    width: 200px;
    opacity: 0.4;
    transform:translate3d(350px, 50px,0);
  }
  img{
    display: block;
    width: 100%;
  }
</style>
</body>
</html>

window.onload = function(){
  var oSlideItems = document.querySelectorAll('.slide-item');
  var classNames = [];
  function init(){
    collectClassNames();
    slideAction();
  }
  function collectClassNames(){
    for(var i = 0; i < oSlideItems.length; i++){
      classNames.push(oSlideItems[i].className);
    }
    console.log(classNames)
  }
  function slideAction(){
    setInterval(setClassNames, 3000)
  }
  function setClassNames(){
    classNames.unshift(classNames.pop())
    render();
  }
  function render(){
    for(var i = 0; i < oSlideItems.length; i++){
      oSlideItems[i].className = classNames[i]
    }
  }
  init();
}

效果