原生js实现一个层叠式幻灯片效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：原生js实现一个层叠式幻灯片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
html, body, main {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#carousel {
  position: relative;
  height: 400px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}
#carousel div {
  position: absolute;
  transition: transform 400ms, left 400ms, opacity 400ms, z-index 0s;
  opacity: 1;
}
#carousel div img {
  width: 400px;
  transition: width 400ms;
   -webkit-user-drag: none;
}
#carousel div.hideLeft {
  left: 0%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#carousel div.hideLeft img {
  width: 200px;
}
#carousel div.hideRight {
  left: 100%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#carousel div.hideRight img {
  width: 200px;
}
#carousel div.prev {
  z-index: 5;
  left: 30%;
  transform: translateY(50px) translateX(-50%);
}
#carousel img:hover {
  cursor: 
}
#carousel div.prev img {
  width: 300px;
}
#carousel div.prevLeftSecond {
  z-index: 4;
  left: 15%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}
#carousel div.prevLeftSecond img {
  width: 200px;
}
#carousel div.selected {
  z-index: 10;
  left: 50%;
  transform: translateY(0px) translateX(-50%);
}
#carousel div.next {
  z-index: 5;
  left: 70%;
  transform: translateY(50px) translateX(-50%);
}
#carousel div.next img {
  width: 300px;
}
#carousel div.nextRightSecond {
  z-index: 4;
  left: 85%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}
#carousel div.nextRightSecond img {
  width: 200px;
}

.buttons {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
}
</style>


</head>

<body  >
  <main>

    <div id="carousel" class="carousel">

       <div id='iten_1' class="hideLeft">
        <img src="//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90">
      </div>

      <div id='item_2' class="prevLeftSecond">
        <img src="//repo.bfw.wiki/bfwrepo/image/607d718558628.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90">
      </div>

      <div id='item_3' class="prev">
        <img src="//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90">
      </div>

      <div id='item_4' class="selected">
        <img src="//repo.bfw.wiki/bfwrepo/image/5e62efa9e6df8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90">
      </div>

      <div id='item_5' class="next">
        <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90">
      </div>

      <div id='item_6' class="nextRightSecond">
        <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef41353c3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90">
      </div>

      <div id='item_7' class="hideRight">
        <img src="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90">
      </div>

      <div id='item_8' class="hideRight">
        <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90">
      </div>

    </div>

    <div class="buttons">
      <button id="prev">Prev</button>
      <button id="next">Next</button>
    </div>
  </main>

  
      <script >
const $ = str => document.querySelector(str);
const $$ = str => document.querySelectorAll(str);

(function() {
    if (!window.app) {
        window.app = {};
    }
    app.carousel = {
        removeClass: function(el, classname='') {
            if (el) {
                if (classname === '') {
                    el.className = '';
                } else {
                    el.classList.remove(classname);
                }
                return el;
            }
            return;
        },
        reorder: function() {
            let childcnt = $("#carousel").children.length;
            let childs = $("#carousel").children;

            for (let j=0; j< childcnt; j++) {
                childs[j].dataset.pos = j;
            }
        },
        move: function(el) {
            let selected = el;

            if (typeof el === "string") {
            console.log(`got string: ${el}`);
                selected = (el == "next") ? $(".selected").nextElementSibling : $(".selected").previousElementSibling;
                con.........完整代码请登录后点击上方下载按钮下载查看