js实现滚动鼠标进行图片层叠相册轮换效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：js实现滚动鼠标进行图片层叠相册轮换效果代码，可通过左右上下按钮进行照片切换，也可直接转动鼠标滚动进行照片切换。

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

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

<head>

    <meta charset="UTF-8">






    <style>
        @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Oswald&display=swap');
        
        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        a{
          text-decoration: none;
          color: #222;
        }
        
        h1{
          font-family: Oswald;
          font-size: 15vmin;
        }
        
        body{
          color: #eee;
          overflow: hidden;
        }
        
        .container{
          height: 100vh;
          width: 100vw;
          background: radial-gradient(circle at 50vw 10vh, rgb(224, 172, 223), rgb(86, 96, 176));
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
        }
        
        .carousel{
          position: relative;
          height: 75vh;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        .arrow{
          position: absolute;
          top: 50%;
          font-size: 2rem;
          right: 7.5vw;
          cursor: pointer;
          width: 3.5rem;
          aspect-ratio: 1/.9;
          display:grid;
          place-content: center;
          border-radius: 50%;
          background: #eeeeee55;
        }
        
        .arrow:first-child{
          left: 7.5vw;
        }
        
        .arrow:hover{
          color: rgb(86, 96, 176);
          background: #eeeeeedd;
        }
        
        .card{
          position: absolute;
          height: 60vmin;
          width: 52vmin;
          transform-origin: bottom;
          transition: transform 1s ease-in-out;
          border: 1vmin solid black;
          background: #eee;
        }
        
        
        .card[data-pos='1']{
          z-index: 1;
        }
        
        .card[data-pos='2']{
          z-index: 2;
        }
        
        .card[data-pos='3']{
          z-index: 3;
        }
        
        .card[data-pos='4']{
          z-index: 4;
        }
        
        .card[data-pos='5']{
          z-index: 5;
        }
        
        .card[data-pos='6']{
          z-index: 6;
        }
        
        .card[data-pos='7']{
          z-index: 7;
        }
        
        .card[data-pos='8']{  
          z-index: 8;
        }
        
        .card-on-left{
          transform: translateX(calc(-50% - 50vw));
        }
        
        .card-on-right{
          transform: translateX(calc(50% + 50vw));
        }
        
        .card-centered[data-pos='1']{
          transform: rotate(5deg);
        }
        
        .card-centered[data-pos='2']{
          transform: rotate(10deg);
        }
        
        .card-centered[data-pos='3']{
          transform: rotate(5deg);
        }
        
        .card-centered[data-pos='4']{
          transform: rotate(0deg);
        }
        
        .card-centered[data-pos='5']{
          transform: rotate(-5deg);
        }
        
        .card-centered[data-pos='6']{
          transform: rotate(-10deg);
        }
        
        .card-centered[data-pos='7']{
          transform: rotate(-5deg);
        }
        
        .card-centered[data-pos='8']{  
          transform: rotate(0deg);
        }
        
        /* anim for moving cards from front to back */
        
        .card[data-pos='9']{
          z-index: 9;
          animation: linear .5s forwards running to-the-back;
        }
        
        @keyframes to-the-back{
        
          25%{
            opacity: 0.75;
          }
          40%{
            transform: translateX(10vw)  rotate(30deg);
            opacity: 0;
            z-index: 9;
          }
          60%{
            transform: translateX(-15vw)  rotate(-45deg);
            opacity: 0;
          }
          75%{
            opacity: 0.75;
            z-index: 1;
          }
          100%{
            transform: translateX(0)  rotate(0);
            opacity: 1;
            z-index: 1;
          }
        }
        
        /* anim for moving cards from back to front */
        
        .card[data-pos='0']{
          z-index: 0;
          animation: linear .5s forwards running to-the-front;
        }
        
        @keyframes to-the-front{
          25%{
            opacity: 0.75;
          }
          40%{
            transform: translateX(-15vw)  rotate(-45deg);
            opacity: 0;
            z-index: 1;
          }
          60%{
            transform: translateX(10vw)  rotate(30deg);
            opacity: 0;
          }
          75%{
            opacity: 0.75;
            z-index: 9;
          }
          100%{
            transform: translateX(0)  rotate(0);
            opacity: 1;
            z-index: 9;
          }
        }
        
        .illustration{
          width: 100%;
          height: auto;
          transition: transform .25s ease-in-out;
        }
        
        .name{
          text-align: center;
          font-size: 5vmin;
          font-family: caveat;
        }
    </style>




</head>

<body>
    <div class="container">

        <h1> Place holders </h1>

        <div class="carousel">

            <div class="arrow" data-dir="-1">
                ⟻
            </div>
            <div class="arrow" data-dir="1">
                ⟼
            </div>

            <div class="card card-on-left" data-pos="1">
                <img src="//repo.bfw.wiki/bfwrepo/image/61de6e39623c8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="Lorem Picsum" class="illustration">
                <p class="name">
                    <a href="">
            Lorem Picsum
          </a>
                </p>
            </div>
            <div class="card card-on-right" data-pos="2">
                <img src="//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90" alt="place holder" class="illustration">
                <p class="name">
                    <a href="">
            place hold.........完整代码请登录后点击上方下载按钮下载查看