クロスフェード トランジションを含むスライドショーを作成しました。画像の上の 3 列のテーブルの中央にキャプションを配置したいと考えています。うまくいかないスクリプトをいくつか試してみましたが、どういうわけか、テーブル内の位置がめちゃくちゃになってしまいました。
スライドショーの上の表の 2 列目にキャプションを配置したい:
まず、レイアウトにテーブルを使用しないでください。
レイアウトは次のとおりです。
<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);
});