带有幻灯片的字幕答案

【问题标题】：Captions with a slideshow带有幻灯片的字幕
【发布时间】：2012-08-22 13:45:44
【问题描述】：

我创建了一个带有淡入淡出过渡的幻灯片，我希望将标题置于图像上方的 3 列表格的中心。我已经尝试了一些脚本但没有运气，不知何故表格内的定位搞砸了。

我想将标题放在幻灯片上方表格的第二列中：

http://munzerhodayfa.com/blaise.html

【问题讨论】：

标签： jquery css slideshow fade captions

【解决方案1】：

首先，您不应该使用表格进行布局。

这是你的布局：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="25%"><a href="contact.html">BLAISE REUTERSWARD</a></td>
      <td width="50%"></td>
      <td width="25%"></td>
    </tr>
  </tbody>
</table>
<div class="fadein">
   <!-- All your images in here -->
</div>

将上面的内容改为：

<div id="header clearfix">
  <div id="contact">
    <a href="contact.html">BLAISE REUTERSWARD</a>
  </div>
  <div id="caption">
    <!-- Caption Text Here -->
  </div>
</div>
<div class="fadein">
   <!-- All your images in here -->
    <img src="images/BR_12.jpg" alt="This will be your caption area for javascript to read">
</div>

这是上面的 CSS：

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }

* html .clearfix { height: 1%; }

#contact {
    width: 25%;
    float: left;
}

#caption {
    width: 50%;
    float: left;
}

.fadein {
    clear:both;
}

对于 Javascript，您必须从某个地方获取标题。我会将标题放在图像的“alt”属性中，并在图片加载时使用 javascript 将其放入标题 div 中（参见上面建议的 HTML）。

$(function() {

    $(".fadein :first-child").appendTo(".fadein");

    setInterval(function() {

         $(".fadein :first-child").hide().appendTo(".fadein").fadeIn(2000, function () {
                 var caption = $(this).attr('alt');
                 $('#caption').text(caption);
             });

    }, 6000);
});

【讨论】：