html - 如何使用轮播让文字出现和消失

Question

我想让文字在图像滑动时出现和消失。我想要同样的效果
其他带有不同文本的图像。
我想创建类似此处显示的滑动横幅的效果: http://www.creativelive.com/

这是我目前的代码
我的 HTML:

<div id="carousel" class="container_24">
  <div class="grid_24">
    <div class="spotlight">
      <span class="text">This text should appear and dissappear</span>
      <a href="#"><img src="images/abstract-q-c-960-390-10.jpg" width="960" height="390"></a>
    </div>
  </div>
  <div class="grid_24">
    <div class="spotlight">
      <span class="text">This text should appear and dissappear</span>
      <a href="#"><img src="images/abstract-q-c-960-390-9.jpg" width="960" height="390"></a>
    </div>
  </div> 
  <div class="grid_24">
    <div class="spotlight">
      <span class="text">This text should appear and dissappear</span> 
      <a href="#"> <img src="images/abstract-q-c-960-390-8.jpg" width="960" height="390"></a>
    </div>
  </div>        
  <div class="grid_24">
    <div class="spotlight">
      <span class="text">This text should appear and dissappear</span>
      <a href="#"> <img src="images/abstract-q-c-960-390-3.jpg" width="960" height="390"></a>
    </div>
  </div>
</div>

我的CSS

.spotlight a {
  display:block;
  width:950px;
  height:390px;
  float:left;

}
.text {
  color:red;
  float:left;
  position:absolute;
  margin:100px 10px 0 800px;
  z-index:50;
}

另外，我正在使用 caroufredsel 插件。

Answer 1

你给 slider 的容器 position: relative; 和标题类似 position absolute;底部:10px；正确的; 0px

position absolute 在 position relative 元素内将放置一些 right: 0 和 top :0 到容器的右上角。你要为哪一部分制作动画？

你究竟看到了什么？你可以张贴图片或网址吗？还是 jsFiddle？

这是我刚才做的:

<figure id="slider">
                <ul>
                    <!-- slide 1 -->
                    <li>                        
                        <div class="inside">caption 1a</div>                        
                        <div class="outside">caption 1b.</div>                      
                        <img src="images/slide1.jpg" alt="slide">
                    </li>
                    <!-- slide 2-->
                    <li>                    
                        <div class="inside">caption 1b </div>                       
                        <div class="outside">caption 2b</div>   
                        <img src="images/slide2.jpg" alt="slide">
                    </li>
                </ul>
            </figure>

和 js:

$( document ).ready(function() {
if($("#slider ul").length != 0) {
    $("#slider ul").carouFredSel({
        auto : {
            duration: 950
        },
        swipe : { onTouch : true, onMouse : false },
        scroll      : {
            fx          : "crossfade"
        },
        items       : {
            visible     : 1,
            width       : 950,
            height      : 503,
        },
    });
}

});

和CSS:

#slider{
    overflow: hidden;
    height: 503px;
    max-width: 1250px;
    position: relative;
}
#slider img{
    z-index: 90;
}
#header #slider .inside{
    overflow: hidden;
    font: 18px/28px 'Michroma', Verdana, Arial, Helvetica, sans-serif;
    position: absolute;
    top: 152px;
    right: 0px;
    color: #fff;
    text-align: center;
    padding: 8px;
    z-index: 99;
    background: #55432e;
}
#slider .outside{
    overflow: hidden;
    font: 13px/18px Verdana, Arial, Helvetica, sans-serif;
    position: absolute;
    display:block;
    bottom: 0px;
    color: #2f2518;
    width: 95%;
    padding: 20px 25px;
    z-index: 99;
    background: url(../images/transparant-bg.png);
}
#slider ul li{
    position: relative;
    float: left;
}