Question

我在CSS3中为图像创建了一个内容滑块。我想创建一个纯CSS3滑块，没有任何Javascript或JQuery。但是，我的图像以某种方式被“切断”。

您可以实时查看问题here。

HTML：

<div id="slider">
<img src="1.jpg" /><img src="1.jpg" /><img src="1.jpg" /><img src="1.jpg" />
</div>

CSS：

body {
    margin: 0;
}

#slider
{
    height: 200px;  
    width: 500px;
    padding: 0;
    margin: 0;
    position: relative;
    display: inline-block;  
    overflow: hidden;
    white-space: nowrap;
    transition: left .3s linear;
    -moz-transition: left .3s linear;
    -o-transition: left .3s linear;
    -webkit-transition: left .3s linear;
    -webkit-animation: slide-animation 25s infinite;
}

@-webkit-keyframes slide-animation {
    0% {left:0px; opacity:1;}
    20% {left:0px; opacity:1;}
    25% {left:-500px; opacity:1;}
    45% {left:-500px; opacity:1;}
    50% {left:-1000px; opacity:1;}
    70% {left:-1000px; opacity:1;}
    75% {left:-1500px; opacity:1;}
    100% {left:-1500px; opacity:0;}
}

非常感谢任何帮助！

Answer 1

尝试定义与其容器对应的图片的width和height。

img{


  width:100%;
  height:100%;
}

嗯，完整的图像显示。

<强>更新

因为您的容器有width:700px，所以animation keyframes应为

@-webkit-keyframes slide-animation {
        0% {margin-left:0px; opacity:1;}
        20% {margin-left:0px; opacity:1;}
        25% {margin-left:-700px; opacity:1;}
        45% {margin-left:-700px; opacity:1;}
        50% {margin-left:-1400px; opacity:1;}
        70% {margin-left:-1400px; opacity:1;}
        75% {margin-left:-2100px; opacity:1;}
        100% {margin-left:-2100px; opacity:0;}
    }

已更新Fiddle。

Answer 2

将所有图像的总宽度设置为容器的宽度。

    #slider
    {
    width:1500px; 
    }

Answer 3

您的容器宽度不足以容纳所有图像。

向左移动时，容器的右边框进入视图，无法看到图像。

实现这一目标的另一种方法是改变第一张图像的边距。

updated codepen

CSS

#slider img:first-child {
    -webkit-animation: slide-animation 25s infinite;
}

@-webkit-keyframes slide-animation {
    0% {margin-left:0px; opacity:1;}
    20% {margin-left:0px; opacity:1;}
    25% {margin-left:-500px; opacity:1;}
    45% {margin-left:-500px; opacity:1;}
    50% {margin-left:-1000px; opacity:1;}
    70% {margin-left:-1000px; opacity:1;}
    75% {margin-left:-1500px; opacity:1;}
    100% {margin-left:-1500px; opacity:0;}
}

CSS3内容滑块可以减少内容

3 个答案: