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 plugin。

Answer 1

您是否给了滑块position: relative;的容器以及类似position absolute; bottom: 10px; right; 0px

的字幕

位置绝对位置相对元素将放置正确的东西：0和顶部：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;
}

如何使文本在旋转木马上显示和消失

1 个答案: