圖像滑塊在上一張圖像後不可見？

所以我有一個圖像滑塊，它的作品...種。我的問題在於我有3張圖片。滑塊在這些圖像中滑動，但是當它從第三張圖像（最後一張）上滑落時，它會消失，但是它會再次滑向第一張圖像？我需要它，所以它從最後一個滑到第一個，而不是在一段時間內不可見。這是我爲它的代碼目前：圖像滑塊在上一張圖像後不可見？

#imgslide { 
 
    width: 550px; 
 
    height: 300px; 
 
    border-radius: 10px; 
 
    position: relative; 
 
    top: 25%; 
 
    left: 50%; 
 
    margin-top: -150px; 
 
    margin-left: -225px; 
 
    overflow: hidden; 
 
} 
 
#imgslide figure img { 
 
    width: 20%; 
 
    float: left; 
 
} 
 
#imgslide figure { 
 
    position: relative; 
 
    width: 500%; 
 
    margin: 0; 
 
    left: 0; 
 
    text-align: left; 
 
    font-size: 0; 
 
    animation: 15s slidy infinite; 
 
} 
 
/* Keyframes */ 
 

 
@keyframes slidy { 
 
    0% { 
 
    left: 0%; 
 
    } 
 
    20% { 
 
    left: 0%; 
 
    } 
 
    25% { 
 
    left: -100%; 
 
    } 
 
    45% { 
 
    left: -100%; 
 
    } 
 
    50% { 
 
    left: -200%; 
 
    } 
 
    70% { 
 
    left: -200%; 
 
    } 
 
    75% { 
 
    left: -300%; 
 
    } 
 
    95% { 
 
    left: -300%; 
 
    } 
 
    100% { 
 
    left: -400%; 
 
    } 
 
}

<div id="imgslide"> 
 
    <figure> 
 
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt=""> 
 
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt=""> 
 
    <img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt=""> 
 
    </figure> 
 
</div>

來源

2016-04-15 Daniel Holler

嘗試這種

#imgslide { 
 
    width: 450px; 
 
    height: 300px; 
 
    border-radius: 10px; 
 
    position: relative; 
 
    top: 25%; 
 
    left: 50%; 
 
    margin-top: 100px; 
 
    margin-left: -225px; 
 
    overflow: hidden; 
 
} 
 
#imgslide figure img { 
 
    width: 20%; 
 
    float: left; 
 
} 
 
#imgslide figure { 
 
    position: relative; 
 
    width: 500%; 
 
    margin: 0; 
 
    left: 0; 
 
    text-align: left; 
 
    font-size: 0; 
 
    animation: 15s slidy infinite; 
 
} 
 
/* Keyframes */ 
 

 
@keyframes slidy { 
 
    0% { 
 
    left: 0%; 
 
    } 
 
    20% { 
 
    left: 0%; 
 
    } 
 
    25% { 
 
    left: -100%; 
 
    } 
 
    45% { 
 
    left: -100%; 
 
    } 
 
    50% { 
 
    left: -200%; 
 
    } 
 
    70% { 
 
    left: -200%; 
 
    } 
 
    75% { 
 
    left: 0%; 
 
    } 
 
}

<div id="imgslide"> 
 
    <figure> 
 
    <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt=""> 
 
    <img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt=""> 
 
    <img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt=""> 
 
    </figure> 
 
</div>

來源

2016-04-15 10:27:07

謝謝你解決了我的問題。 –

您的圖像填充只有60％的空間（3×20％），加2張圖片以填充空間或伸展你的圖像的33.33％寬度和數字至300％（調整動畫爲0％，100％和200％）

來源

2016-04-15 10:09:28

圖像滑塊在上一張圖像後不可見？

回答

相關問題