1 
<div class="carousel colorDissolve">
    <img class="item" src="car.jpg" />
    <img class="item" src="plane.jpg" />
    <img class="item" src="train.jpg"/>
    <img class="item" src="boat.jpg" />
</div>

/* colorDissolve  */
.colorDissolve {
  position: relative;
  overflow: hidden;
  width: 287px;
  height: 430px;
  background: #000000;
}
.colorDissolve .item {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-animation: colorDissolve 24s linear infinite;
  -moz-animation: colorDissolve 24s linear infinite;
  -ms-animation: colorDissolve 24s linear infinite;
  animation: colorDissolve 24s linear infinite;
}
.colorDissolve .item:nth-child(2) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
.colorDissolve .item:nth-child(3) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
.colorDissolve .item:nth-child(4) {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}

@-webkit-keyframes colorDissolve {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@-moz-keyframes colorDissolve {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@-ms-keyframes colorDissolve {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@keyframes colorDissolve {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}

我似乎无法在这个轮播中获得文字 OVER 图像。如果我使用按钮滑块，我可以，但我似乎不能这样做。感觉就像我没有得到正确的 div 结构。我试图对每张幻灯片进行 div 分割，但文本显示在每个 div 的第一张幻灯片上。任何指导将不胜感激。当每张幻灯片出现时，我需要在每张幻灯片上使用不同的文本，但我无法让它在结构上起作用。

4

2 回答 2

1

JS小提琴DEMO

稍微修改了你的标记

<div class="carousel colorDissolve">
    <div class="item">
    <img  src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTGNBB_xiix1HdkfCW1OG8NmMqbU23KUIXKE1HuK3RW3UBV_smc" />
    <span>Picture Car from Google.com</span>
    </div>
      <div class="item">
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRMj84NfnxY3l_GbZFFUvmBI3Zg_tPjPutlomjfiU0TyPJFG3O1" />
     <span>Picture Plane  from Google.com</span>
            </div>
      <div class="item">
    <img  src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS_i3dd7B8UkOKEaI4bVBmpyld_5JkZWbwC8vObZiw6PxUTSl53"/>
            <span>This is train</span>
            </div>
      <div class="item">
    <img  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZT3h9jLlg7yC3RNr8rg8l2JlurpXkJX1MXRrwh9eYI9BMJD316w" />
            <span>This is boatm</span>
            </div>

</div>

为 span 添加样式

span{
position:absolute;
    top:0px;
    left:0px;
    color:#c30;
    font-size:2em;
    -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}
于 2013-05-10T23:42:09.027 回答
0

I used simple <p> instead of image and I gave image as a back-ground...It worked perfectly. might needed little modification for alignment and font's styles...

  <div id="table_container">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <p style="background-image: url('image/Tourist destination (9).jpg'); height: 400px; width: 1000px;">
                            <font size='14px;' color='white'>Hello...</font><br/>
                            <font size='10px;' color='white'>How are you doing?</font>
                        </p>
                    </div>
     </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
于 2015-01-06T05:38:37.687 回答