[CrossSlideライブラリ] 画像をフェードイン/アウトさせながらスライド表示する

説明

CrossSlideライブラリで画像をフェードイン/アウトさせながらスライド表示するには、画像を表示するためのコンテナをdivタグ等で用意します。divタグには必ずスタイルシートで横幅と縦幅を設定しておきます。あとはページが読み込まれたら、そのdivタグを$()で指定しcrossSlide()を実行します。crossSlide()のパラメータに表示する画像などを設定します。crossSlide()は2つのパラメータが必要で最初のパラメータは表示に関するオプションパラメータ、2番目には切り替えて表示する画像のURLなどの情報を配列に指定します。表示に関するオプションパラメータで表示時間をsleepで、フェードにかかる時間をfadeで指定します。どちらも単位は秒になります(ミリ秒ではありません)。
crossSlide()の2番目のパラメータには配列に表示する画像のURLなどを指定します。最低限srcで表示する画像のURLを指定する必要があります。

サンプルプログラム

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cross-slide.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>jQuery CrossSlideサンプル</h1>
<div id="myPhoto">読み込み中...</div>
</body>
</html>


【sample.js】
$(function(){
$("#myPhoto").crossSlide({
sleep : 2,
fade : 1
},
[
{ src : 'photo/1.jpg' },
{ src : 'photo/2.jpg' },
{ src : 'photo/3.jpg' },
{ src : 'photo/4.jpg' },
{ src : 'photo/5.jpg' },
{ src : 'photo/6.jpg' }
]);
});
サンプルを実行
[戻る]