Question

我有以下图片幻灯片，我的问题是这篇文章下面的文章是关于这篇文章并且坐在它上面，我哪里出错了？幻灯片本身工作正常，所以没有问题。

HTML：

<article class="c-all b-all a-all mainImageArticle fade-in one">
<section class="image-slider">
    <div class="fadein">
        <img id="f3" src="landing_image.jpg" alt="Image"/>
        <img id="f2" src="landing_image.jpg" alt="Image"/>
        <img id="f1" src="landing_image.jpg" alt="Image"/>
    </div>
</section>
</article>

CSS：

.mainImageArticle {
  position: relative;
}

.fadein img {
  position: absolute;
  top: 0;
  -webkit-animation-name: fade;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-duration: 6s;
}

@-webkit-keyframes fade {
  0% {opacity: 0;}
  20% {opacity: 1;}
  33% {opacity: 1;}
  53% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes fade {
  0% {opacity: 0;}
  20% {opacity: 1;}
  33% {opacity: 1;}
  53% {opacity: 0;}
  100% {opacity: 0;}
}

#f2 {
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
}

#f3 {
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

Answer 1

如果没有示例，很难确切地知道发生了什么，如果您要创建一个jsfiddle或codepen，我们可能会进一步提供帮助。

然而，也就是说，您可能需要给滑块容器image-slider一个高度。从该代码看，它内部的东西看起来绝对定位，这意味着它的容器不知道它自己的高度。导致它下面的任何东西移动到它的位置。

Answer 2

我使用你的代码创建了一个jsFiddle，并且只为你的代码添加了一个类。

http://jsfiddle.net/7yyuhk03/

<强> CSS

.mainImageArticle {
  position: relative;
}
img {
    width: 250px;
    height: 160px;
}
.fadein img {
  position: absolute;
  top: 0;
  -webkit-animation-name: fade;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-duration: 6s;
}

@-webkit-keyframes fade {
  0% {opacity: 0;}
  20% {opacity: 1;}
  33% {opacity: 1;}
  53% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes fade {
  0% {opacity: 0;}
  20% {opacity: 1;}
  33% {opacity: 1;}
  53% {opacity: 0;}
  100% {opacity: 0;}
}

#f2 {
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
}

#f3 {
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

我刚为图像添加了一个类，并为其指定了with和height。

这是HTML

<article class="c-all b-all a-all mainImageArticle fade-in one">
<section class="image-slider">
    <div class="fadein">
        <img id="f3" src="http://viralstash.net/wp-content/uploads/2014/03/521013543_1385596410.jpg" alt="Image"/>
        <img id="f2" src="http://wallpapertodays.com/wp-content/uploads/2014/06/Dogs-Wallpaper-Desktop.jpg" alt="Image"/>
        <img id="f1" src="http://9pixs.com/wp-content/uploads/2014/06/dog-pics_1404159465.jpg" alt="Image"/>
    </div>
</section>
</article>

有关另一篇文章的文章？

2 个答案: