CSS轮播只一遍又一遍地显示最后一张图片

Posted

技术标签:

【中文标题】CSS轮播只一遍又一遍地显示最后一张图片【英文标题】：CSS carousel only shows last picture over and over 【发布时间】：2021-03-28 12:10:14 【问题描述】：

我正在尝试在我的项目中实现 this 轮播。当我将 html 放入 codepen 时，它可以正常工作，但是当我将 css 放入我的项目中时，它只会重复显示第 5 张卡片。我认为它是将所有卡片放在一起，然后将它们全部循环，卡片 5 在上面。

我已经更改了卡片轮播的一些 CSS，但没有什么应该破坏它。是我的卡片样式导致了问题吗？还有什么？

感谢您提供的任何帮助！

HTML：

<div class="card-ctn">
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=1Kw1elu9QjAC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
        <div class="descriptions">
        <h5 class="title">Paint It Black</h5>
        <p class="card-text">Janet Fitch</p>
        <p class="desc">
            "some text"
        </p>
        <div class="hide">075956812X</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=g0OZtYOW1v8C&printsec=frontcover&img=1&zoom=1&source=gbs_api " >
        <div class="descriptions">
        <h5 class="title"> A Storm of Swords Complete Edition (Two in One) (A Song of Ice and Fire, Book 3)</h5>
        <p class="card-text">George R. R. Martin</p>
        <p class="desc">
            some text
        </p>
        <div class="hide">9780007426232</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=FKzLugEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api" >
        <div class="descriptions">
        <h5 class="title"> 1066</h5>
        <p class="card-text">David Armine Howarth</p>
        <p class="desc">
            some text
        </p>
        <div class="hide">0140058508</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=zV4PuFn5gvoC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
        <div class="descriptions">
        <h5 class="title">Sex at Dawn</h5>
        <p class="card-text">Christopher Ryan,Cacilda Jetha</p>
        <p class="desc">
            Some Text
        </p>
        <div class="hide">075956812X</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=XfFvDwAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
        <div class="descriptions">
            <h5 class="title">Atomic Habits</h5>
            <p class="card-text">James Clear</p>
            <p class="desc">
                Some Text
            </p>
            <div class="hide">9780735211292</div>
            <button (click)="addToCart($event)" class="btn cart">Cart</button>
            <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
  </div>

CSS（我稍作改动）


/* *************************
       Card Carousel
**************************** */
@keyframes display 
  0% 
    transform: translateX(300px);
    opacity: 0;
  
  20% 
    transform: translateX(0);
    opacity: 1;
  
  80% 
    transform: translateX(0);
    opacity: 1;
  
  100% 
    transform: translateX(-300px);
    opacity: 0;
  


.card-ctn 
  position: relative;
  height: 400px;
  margin-bottom: -30px;
  overflow: hidden;
  margin-top: -30px;


.card-ctn > .card 
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  animation: display 8s infinite;


.card:nth-child(2) 
  animation-delay: 2s;

.card:nth-child(3) 
  animation-delay: 4s;

.card:nth-child(4) 
  animation-delay: 6s;

.card:nth-child(5) 
  animation-delay: 8s;


/* *************************
      End Card Carousel
**************************** */

/* *************************
      Card Styles
**************************** */
.card 
  flex: 1;
  flex-basis: 300px;
  flex-grow: 0;
  height: 300px;
  width: 200px;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.5);
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  overflow: hidden;
  position: relative;
  margin-top: 38px;
  margin-left: 20px;

.card img 
  width: 100%;
  height: 100%;
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);

.descriptions 
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transition: all 0.7s ease-in-out;
  padding: 20px;
  box-sizing: border-box;
  clip-path: circle(0% at 100% 100%);

.card:hover .descriptions 
  left: 0px;
  transition: all 0.7s ease-in-out;
  clip-path: circle(75%);

.card:hover 
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
  transform: scale(0.97);

.card:hover img 
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  transform: scale(1.6) rotate(20deg);
  filter: blur(3px);

.card h5 
  color: white;
  text-shadow: 0 0 5px black;
  letter-spacing: 1px;
  margin: 0px;
  margin-top: -20px;
  height: 45px;
  overflow: hidden;


.card p 
  color: white;
  text-shadow: 0 0 5px black;
  line-height: 24px;
  font-size: 15px;

.card-text 
  height: 47px;

.card:hover .desc 
  background: rgba(54, 54, 54, 0.356);
  border-radius: 10px 0 0 10px;

.desc 
  height: 100px;
  height: 147px;
  width: 100%;
  overflow-y: scroll;
  padding-right: 40px;
  margin-bottom: 20px;
  margin-top: -12px;
  box-sizing: content-box;
  mix-blend-mode: difference;


.card button 
  position: absolute;
  bottom: 15px;
  width: 70px;
  height: 30px;
  cursor: pointer;
  border-style: none;
  background-color: #04a304;
  color: #fff;
  font-size: 13px;
  outline: none;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
  transition: all 0.5s ease-in-out;

.wish 
  right: 10px;

.cart 
  left: 10px;


.card button:hover 
  transform: scale(0.95) translateX(-5px);
  transition: all 0.5s ease-in-out;


.hide 
  opacity: 0;

【问题讨论】：

【参考方案1】：

它对我有用！

html, body 
  margin: 0;
  padding: 0;


.pic-ctn 
  width: 100vw;
  height: 200px;


@keyframes display 
  0% 
    transform: translateX(200px);
    opacity: 0;
  
  10% 
    transform: translateX(0);
    opacity: 1;
  
  20% 
    transform: translateX(0);
    opacity: 1;
  
  30% 
    transform: translateX(-200px);
    opacity: 0;
  
  100% 
    transform: translateX(-200px);
    opacity: 0;
  


.pic-ctn 
  position: relative;
  width: 100vw;
  height: 300px;
  margin-top: 15vh;


.pic-ctn > .card 
  position: absolute;
  top: 0;
  left: calc(50% - 100px);
  opacity: 0;
  animation: display 10s infinite;


.card:nth-child(2) 
  animation-delay: 2s;

.card:nth-child(3) 
  animation-delay: 4s;

.card:nth-child(4) 
  animation-delay: 6s;

.card:nth-child(5) 
  animation-delay: 8s;

.card 
  flex: 1;
  flex-basis: 300px;
  flex-grow: 0;
  height: 300px;
  width: 200px;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.5);
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  overflow: hidden;
  position: relative;
  margin-top: 38px;
  margin-left: 20px;

.card img 
  width: 100%;
  height: 100%;
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);

.descriptions 
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transition: all 0.7s ease-in-out;
  padding: 20px;
  box-sizing: border-box;
  clip-path: circle(0% at 100% 100%);

.card:hover .descriptions 
  left: 0px;
  transition: all 0.7s ease-in-out;
  clip-path: circle(75%);

.card:hover 
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
  transform: scale(0.97);

.card:hover img 
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  transform: scale(1.6) rotate(20deg);
  filter: blur(3px);

.card h5 
  color: white;
  text-shadow: 0 0 5px black;
  letter-spacing: 1px;
  margin: 0px;
  margin-top: -20px;
  height: 45px;
  overflow: hidden;


.card p 
  color: white;
  text-shadow: 0 0 5px black;
  line-height: 24px;
  font-size: 15px;

.card-text 
  height: 47px;

.card:hover .desc 
  background: rgba(54, 54, 54, 0.356);
  border-radius: 10px 0 0 10px;

.desc 
  height: 100px;
  height: 147px;
  width: 100%;
  overflow-y: scroll;
  padding-right: 40px;
  margin-bottom: 20px;
  margin-top: -12px;
  box-sizing: content-box;
  mix-blend-mode: difference;


.card button 
  position: absolute;
  bottom: 15px;
  width: 70px;
  height: 30px;
  cursor: pointer;
  border-style: none;
  background-color: #04a304;
  color: #fff;
  font-size: 13px;
  outline: none;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
  transition: all 0.5s ease-in-out;

.wish 
  right: 10px;

.cart 
  left: 10px;


.card button:hover 
  transform: scale(0.95) translateX(-5px);
  transition: all 0.5s ease-in-out;


.hide 
  opacity: 0;

<div class="pic-ctn">
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=1Kw1elu9QjAC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
        <div class="descriptions">
        <h5 class="title">Paint It Black</h5>
        <p class="card-text">Janet Fitch</p>
        <p class="desc">
            "some text"
        </p>
        <div class="hide">075956812X</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=g0OZtYOW1v8C&printsec=frontcover&img=1&zoom=1&source=gbs_api " >
        <div class="descriptions">
        <h5 class="title"> A Storm of Swords Complete Edition (Two in One) (A Song of Ice and Fire, Book 3)</h5>
        <p class="card-text">George R. R. Martin</p>
        <p class="desc">
            some text
        </p>
        <div class="hide">9780007426232</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=FKzLugEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api" >
        <div class="descriptions">
        <h5 class="title"> 1066</h5>
        <p class="card-text">David Armine Howarth</p>
        <p class="desc">
            some text
        </p>
        <div class="hide">0140058508</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=zV4PuFn5gvoC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
        <div class="descriptions">
        <h5 class="title">Sex at Dawn</h5>
        <p class="card-text">Christopher Ryan,Cacilda Jetha</p>
        <p class="desc">
            Some Text
        </p>
        <div class="hide">075956812X</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=XfFvDwAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
        <div class="descriptions">
            <h5 class="title">Atomic Habits</h5>
            <p class="card-text">James Clear</p>
            <p class="desc">
                Some Text
            </p>
            <div class="hide">9780735211292</div>
            <button (click)="addToCart($event)" class="btn cart">Cart</button>
            <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
  </div>

【讨论】：

次要不相关的用户体验反馈：当您将鼠标悬停在卡片上时，禁用滑动动画。

以上是关于CSS轮播只一遍又一遍地显示最后一张图片的主要内容，如果未能解决你的问题，请参考以下文章

viewpager轮播的时候，当从最后一张图片轮播到第一张的时候，会把前面轮播过的都显示一遍啊

使用css做轮播效果为啥最后一张图片显示不出来

一遍又一遍地运行代码

据说随机 API 一遍又一遍地返回相同的东西

为啥 OnPreRender 被一遍又一遍地调用？

为啥这不会一遍又一遍地返回一个新值？爪哇