Question

原文：

CSS：

    .wavsplashslider {position: relative; height:392px; overflow:hidden; }
    .slideimg:hover {cursor:pointer}
    .wavsplashslide {position: absolute;top: 0; left: 0;z-index: -5;
    -webkit-animation: slideshow 12s linear 0s infinite;-moz-animation: slideshow 12s linear 0s infinite;-ms-animation: slideshow 12s linear 0s infinite;-o-animation: slideshow 12s linear 0s infinite;animation: slideshow 12s linear 0s infinite;}
    .wavsplashslide:hover {cursor:pointer}
    .wavsplashslide:nth-child(2) {z-index: -4;-webkit-animation: slideshow 12s linear 4s infinite;-moz-animation: slideshow 12s linear 4s infinite;-ms-animation: slideshow 12s linear 4s infinite;-o-animation: slideshow 12s linear 4s infinite;animation: slideshow 12s linear 4s infinite;}
    .wavsplashslide:nth-child(3) {z-index: -3;
    -webkit-animation: slideshow 12s linear 8s infinite;-moz-animation: slideshow 12s linear 8s infinite;-ms-animation: slideshow 12s linear 8s infinite;-o-animation: slideshow 12s linear 8s infinite;animation: slideshow 12s linear 8s infinite;}
    @-webkit-keyframes slideshow {25% { opacity: 1;}33.33% { opacity: 0;} 91.66% { opacity: 0;}100% { opacity: 1;}}
    @-moz-keyframes slideshow {25% { opacity: 1;}33.33% { opacity: 0;} 91.66% { opacity: 0;}100% { opacity: 1;}}
    @-ms-keyframes slideshow {25% { opacity: 1;}33.33% { opacity: 0;}  91.66% { opacity: 0;}100% { opacity: 1;}}
    @-o-keyframes slideshow {25% { opacity: 1;}33.33% { opacity: 0;} 91.66% { opacity: 0;}100% { opacity: 1;}}
    @keyframes slideshow {25% { opacity: 1;}33.33% { opacity: 0;} 91.66% { opacity: 0;}100% { opacity: 1;}}

HTML：

    <div class="wavsplashslider">
    <div class="wavsplashslide">
    <a href="http://stackoverflow.com/"><img src="bird.jpg" /></a>
    </div>
    <div class="wavsplashslide">
    <a href="http://stackoverflow.com/questions"><img src="solid.jpg" /></a>
    </div>
    <div class="wavsplashslide">
    <a href="http://stackoverflow.com/tags"><img src="design.jpg" /></a>
    </div>
    </div>

更新：

感谢您的帮助！现在有人能给我一个关于如何减慢幻灯片的提示吗？我希望所有幻灯片的显示持续时间与页面加载时的第一张幻灯片相同，但在第一张幻灯片后，它们会很快开始循环播放。

.wavsplashslider {position: relative; top: 0; left: 0;  width: 824px; height:392px; overflow:hidden; }
.wavsplashslide {width: 824px; height:392px; position: absolute; top: 0; left: 0;-webkit-animation: slideshow 12s linear 0s infinite;-moz-animation: slideshow 12s linear 0s infinite;-ms-animation: slideshow 12s linear 0s infinite;-o-animation: slideshow 12s linear 0s infinite;animation: slideshow 12s linear 0s infinite;}
.wavsplashslide:nth-child(2) {-webkit-animation: slideshow 12s linear 4s infinite;-moz-animation: slideshow 12s linear 4s infinite;-ms-animation: slideshow 12s linear 4s infinite;-o-animation: slideshow 12s linear 4s infinite;animation: slideshow 12s linear 4s infinite;}
.wavsplashslide:nth-child(3) {-webkit-animation: slideshow 12s linear 8s infinite;-moz-animation: slideshow 12s linear 8s infinite;-ms-animation: slideshow 12s linear 8s infinite;-o-animation: slideshow 12s linear 8s infinite;animation: slideshow 12s linear 8s infinite;}

@-webkit-keyframes slideshow {25% { opacity: 1; left: 0;} 33.33% { opacity: 0;left: -824px;} 91.66% { opacity: 0;left: -824px;} 100% { opacity: 1; left: 0}}
@-moz-keyframes slideshow {25% { opacity: 1; left: 0;} 33.33% { opacity: 0;left: -824px;} 91.66% { opacity: 0;left: -824px;} 100% { opacity: 1; left: 0}}
@-ms-keyframes slideshow {25% { opacity: 1; left: 0;} 33.33% { opacity: 0;left: -824px;} 91.66% { opacity: 0;left: -824px;} 100% { opacity: 1; left: 0}}
@-o-keyframes slideshow {25% { opacity: 1; left: 0;} 33.33% { opacity: 0;left: -824px;} 91.66% { opacity: 0;left: -824px;} 100% { opacity: 1; left: 0}}
@keyframes slideshow {25% { opacity: 1; left: 0;} 33.33% { opacity: 0;left: -824px;} 91.66% { opacity: 0;left: -824px;} 100% { opacity: 1; left: 0}}




<div class="wavsplashslider">

<div class="wavsplashslide">
<a href="http://stackoverflow.com">
<img src="http://lorempixel.com/824/392"  />
</a>
</div>


<div class="wavsplashslide">
<a href="http://stackoverflow.com/questions">
<img src="http://lorempixel.com/824/392" />
</a>
</div>

<div class="wavsplashslide">
<a href="http://stackoverflow.com/tags">
<img src="http://lorempixel.com/824/392" />
</a>
</div>
</div>

Answer 1

您的班级.wavsplashslide {}没有宽度或高度。如果您注意到滑块的左上角会有一个小的可点击框。设置合适的宽度和高度，它应该工作。此外，删除z-index属性，因为它导致父元素具有更高的图层优先级并覆盖.wavsplashslide {}。

.wavsplashslide {position: absolute; top: 0; left: 0; height: 392px; width: 1170px; ...animations}

如何在纯css滑块中为每个图像添加唯一链接？

1 个答案: