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

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

代码语言：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/5e62ee.........完整代码请登录后点击上方下载按钮下载查看