Question

我目前正在制作CSS3中的幻灯片，我想为每张图片显示一个文字。我使用此示例：http://www.creativejuiz.fr/trytotry/juizy-slideshow-full-css3-html5/，但我没有使用完全相同的代码，因为我的响应速度很快。

这是我的HTML代码：

<div id="slideshow">
    <div id="slideshow-container">
        <div id="slider">
            <figure>
                <img src="images/image-1.jpg" alt="">
                <figcaption>Style 1</figcaption>
            </figure>
            <figure>
                <img src="images/image-2.jpg" alt="">
                <figcaption>Style 2</figcaption>
            </figure>
            <figure>
                <img src="images/image-3.jpg" alt="">
                <figcaption>Style 3</figcaption>
            </figure>
            <figure>
                <img src="images/image-4.jpg" alt="">
                <figcaption>Style 4</figcaption>
            </figure>
        </div>
        <span id="timeline"></span>
    </div>
</div>

和CSS：

/* SLIDESHOW */

#slideshow
{
    margin: 0 auto;
    width: 75%;
    padding: 5px;
    border: 1px solid #CCCCCC;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
}

#slideshow-container
{
    position: relative;
    overflow: hidden;
}

#slider
{
    position: relative;
    width: 500%;
    animation: 32s slider infinite;
    -webkit-animation: 32s slider infinite;
    -moz-animation: 32s slider infinite;
    -o-animation: 32s slider infinite;
}

#slider figure
{
    position: relative;
    margin: 0;
}

#slider img
{
    width: 20%;
    float: left;
}

#slideshow figcaption
{
    position:absolute;
    padding: 20px 20px; margin:0;
    left:0; right:0; bottom: 5px;
    text-align:center;
    letter-spacing: 0.05em;
    word-spacing: 0.05em;
    font-family: Georgia, Times, serif;
    background: #000;
    background: rgba(255,255,255,0.7);
    border-top: 1px solid rgb(225,225,225);
    color: #555;
    text-shadow: -1px -1px 0 rgba(255,255,255,0.3);

    -webkit-animation: figcaptionner 32s infinite;
    -moz-animation: figcaptionner 32s infinite;
    animation: figcaptionner 32s infinite;
}

/* Slider animation */

@keyframes slider
{
    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: 0%;
    }
}

@-webkit-keyframes slider
{
    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: 0%;
    }
}

@-moz-keyframes slider
{
    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: 0%;
    }
}

@-o-keyframes slider
{
    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: 0%;
    }
}

/* TIMELINE */

#timeline
{
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgb(214, 98, 13);
    height: 2px;
    animation: timeliner 32s infinite;
    -webkit-animation: timeliner 32s infinite;
    -moz-animation: timeliner 32s infinite;
    -o-animation: timeliner 32s infinite;
}

/* Timeline animation */

@keyframes timeliner
{
    0%, 25%, 50%, 75%, 100%
    {
        width: 0;
    }

    20%, 45%, 70%, 95%
    {
        width: 100%;
    }
}

@-webkit-keyframes timeliner
{
    0%, 25%, 50%, 75%, 100%
    {
        width: 0;
    }

    20%, 45%, 70%, 95%
    {
        width: 100%;
    }
}

@-moz-keyframes timeliner
{
    0%, 25%, 50%, 75%, 100%
    {
        width: 0;
    }

    20%, 45%, 70%, 95%
    {
        width: 100%;
    }
}

@-o-keyframes timeliner
{
    0%, 25%, 50%, 75%, 100%
    {
        width: 0;
    }

    20%, 45%, 70%, 95%
    {
        width: 100%;
    }
}

没有添加figcaption标签的结果：http://nextgenfocus.com/slideshow/

我想为每张图片提供一个文字，但我不知道如何。

这里是figcaption标签的结果：nextgenfocus.com/slideshow2

我补充说：

#slider figcaption
{
    position: absolute;
    margin: 0;
    padding: 20px 20px;
    right: 0;
    bottom: 5px;
    left: 0;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgb(225, 225, 225);
    color: #555;
}

但文字没有出现。

如果您找到解决方案，谢谢。

Answer 1

问题出现在float: left图片上，这使得<figure>高度为零。将width: 20%和float: left移至<figure>，然后将图片更改为width: 100%。它会起作用。

#slider figure
{
    position: relative;
    margin: 0;
    width: 20%;
    float: left;
}

#slider img
{
   width:100%;
}

这是working fiddle。

希望有所帮助：）

CSS3幻灯片：如何显示每个图像的文本？

1 个答案: