Question

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

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

Answer 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);
});

带幻灯片的字幕

1 个答案: