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

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

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