图像滑块在上一张图像后不可见？

所以我有一个图像滑块，它的作品...种。我的问题在于我有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

图像滑块在上一张图像后不可见？

回答

相关问题