jquery实现一个层叠堆积图文卡片切换幻灯片效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：jquery实现一个层叠堆积图文卡片切换幻灯片效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.min.css">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
        
        #backup{
          display:none;
        }
        
        body {
          background-image: linear-gradient(to bottom, #b1f7e3, #727991, #7f4fca);
          color: #333;
          font-family: Nunito, sans-serif;
          line-height: 2em;
          min-height: 100vh;
          padding: 100px;
          transition: height 5s;
        }
        
        h1 {
          border-bottom: 1px solid #fcfcfc;
          color: #fcfcfc;
          display: inline-block;
          margin-right: 80px;
          max-width: 200px;
          padding: 10px;
          text-transform: uppercase;
          text-shadow: 1px 1px 2px #727991;
          vertical-align: middle;
          position:relative;
        }
        
        h1 .limit-error{
          font-size: .5em;
          font-weight: normal;
          line-height: 1em;
          text-transform: none;
          
          position:absolute;
          left:0;
          bottom:-75px;
          width:100%;
          opacity:0;
          transition:all .2s;
        }
        
        h1 .limit-error.show{
          opacity:1;
        }
        
        nav {
          display: inline-block;
          margin-top: -50px;
          vertical-align: middle;
          width: 100%;
        }
        
        nav button {
          background: white;
          border: 2px solid white;
          border-radius: 100%;
          box-sizing: border-box;
          color: #7f4fca;
          display: inline-block;
          font-size: 16px;
          line-height: 38px;
          margin: 5px 10px;
          padding: 0 5px;
          height: 40px;
          width: 40px;
          opacity: 0.8;
          text-align: center;
        
          transition: all 0.2s;
        }
        
        nav button:hover,
        nav button:focus {
          border-color: #b1f7e3;
          cursor: pointer;
          opacity: 1;
        }
        
        nav button[disabled],
        nav button[disabled]:hover {
          background: #afafaf;
          border-color: #afafaf;
          cursor: default;
          filter: grayscale(1);
          opacity: 0.8;
        }
        
        #articles {
          display: inline-block;
          list-style: none;
          padding: 0;
          max-height: 0;
          overflow: hidden;
          position: relative;
        
          perspective: 1000px;
          perspective-origin: 50% -50%;
        
          height: 500px;
          width: 300px;
        
          transition: all 1s;
          vertical-align: middle;
        }
        
        #articles h2 {
          font-size: 1.25em;
          margin: 0;
          min-height: 100px;
        }
        
        #articles .date {
          color: #727991;
          font-size: 0.8em;
          margin-top: 0;
          text-transform: uppercase;
        }
        
        #articles li {
          background: #7f4fca;
          border-radius: 5px;
          display: inline-block;
          max-height: 390px;
          max-width: 300px;
          overflow: hidden;
          vertical-align: top;
        
          box-shadow: 0 0 3px 0 #b1f7e3;
        
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
        
          transition: all 0.5s;
          opacity: 1;
        
          z-index: -2;
        }
        
        #articles li.go-away {
          opacity: 0;
          top: 600px;
          transform:rotateX(10deg);
        }
        
        #articles li.error{
          color:#fff;
          text-align:center;
          padding:35px 10px;
        }
        
        #articles li .card-content {
          background: white;
          opacity: 1;
          position: relative;
          padding: 5px 15px;
          top: 0;
        
          transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        #articles li .card-content.open,
        #articles li:hover .card-content.open,
        #articles li:focus .card-content.open{
          top: -200px;
          opacity: 0.8;
        }
        #articles li:hover .card-content.open .description,
        #articles li:focus .card-content.open .description{
          opacity: 1;
        }
        
        #articles li:hover,#articles li:focus {
          cursor: pointer;
        }
        
        #articles li:hover .card-content,#articles li:focus .card-content{
          top: -50px;
        }
        
        #articles li:hover .description,#articles li:focus .description {
          opacity: 0.3;
        }
        
        #articles li .card-content:before {
          content: "";
          height: 7.5px;
          width: 75px;
        
          position: absolute;
          top: -3px;
          left: 0;
        }
        
        
        #articles li .card-content:before {
          background-color: #747796;
        }
        #articles li.snapshot .card-content:before {
          background-color: #749d1c;
        }
        #articles li.soompi .card-content:before {
          background-color: #7f4fca;
        }
        #articles li.music .card-content:before {
          background-color: #4ecdc4;
        }
        #articles li.celeb .card-content:before {
          background-color: #ff6b6b;
        }
        #articles li.features .card-content:before {
          background-color: #f8ca00;
        }
        
        #articles li.music a {
          color: #4ecdc4;
        }
        #articles li.celeb a {
          color: #ff6b6b;
        }
        #articles li.features a {
          color: #f8ca00;
        }
        #articles li.snapshot a {
          color: #749d1c;
        }
        #articles li.soompi a {
          color: #7f4fca;
        }
        
        #articles .card-image {
          background-color: #727991;
          background-size: cover;
          background-repeat: no-repeat;
          background-position:center;
          height: 200px;
          width: 100%;
        }
        
        #articles .eyebrow-title {
          text-transform: uppercase;
          font-size: 0.8em;
          margin-top: 5px;
          margin-bottom: 0;
        }
        
        #articles .description {
          line-height: 1.5em;
          opacity: 0;
        
          transition: all 0.5s;
        }
        
        #articles .open .description {
          opacity: 1;
        }
        
        .description p:first-child {
          overflow: hidden;
          max-height: 145px;
        }
        
        .description p:nth-child(2) {
          display: none;
        }
        
        .more-info {
          color: #fff;
          text-align: center;
          max-width:300px;
          margin:0 auto;
        }
        
        @media (min-width: 663px) {
          .more-info{
            text-align: left;
            margin-left:0;
            max-width:600px;
          }
          h1 {
            margin-right: 30px;
          }
          #articles {
            height: 600px;
          }
          nav {
            margin-top: 0;
            width: 50px;
          }
          nav button {
            transform: rotate(90deg);
          }
        }
        
        @media (min-width: 900px) {
          h1 {
            margin-right: 50px;
          }
        }
    </style>



</head>

<body>
   

    <ul id="articles">

    </ul>

    <nav>
        <button class="prev-article" disabled><i class="fas fa-arrow-left"></i></button>
        <button class="next-article"><i class="fas fa-arrow-right"></i></button>
    </nav>

   
    <script type="template" id="article-template">
        <li class="{{category}}" style="z-index:{{z-index}};">
            <div class="card-image" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png)">
            </div>
            <div class="card-content">
                <p class="eyebrow-title">{{category}}</p>
     .........完整代码请登录后点击上方下载按钮下载查看