###前提・実現したいこと
jQueryを使用しまして、1枚目の画像(image[0].jpg)は自動で縦スクロール、2枚目以降をフェードインさせたいのですが、プラグインを使用せず、縦スクロール、フェードインの両方を満たす様に自作することは可能でしょうか。
画像はそれぞれ1回のみ表示させ、ループはしないよう考えています。
1枚目の画像(image[0].jpg)は、他の画像より高さが長いものになります。
こちらに関し、わかる方いましたら、ご教授のほどよろしくお願いします。
※現時点でのjQueryの処理を追記しました。
###発生している問題
縦スクロールをさせようと、animateを記述してみましたが、
書き方が間違っているか、他に処理が必要なのかうまく動作しませんでした。
###スライドショー完成イメージ
0. image[0].jpgを表示する。
0. image[0].jpgをdiv枠内で映画のエンドロールのように下から上へスクロールする。
0. image[0].jpgが画像の一番下までスクロール完了後、フェードアウトする。
0. image[1].jpgをフェードインする。
0. 2秒後にimage[1].jpgをフェードアウトする。
0. image[2].jpgをフェードインする。
0. 2秒後にimage[2].jpgをフェードアウトする。
0. image[3].jpgをフェードインする。
0. 2秒後にimage[3].jpgをフェードアウトする。
0. image[4].jpgをフェードインする。
0. 2秒後にimage[4].jpgをフェードアウトする。
0. image[5].jpgをフェードインする。
0. 2秒後にimage[5].jpgをを表示させたままで、以降は何もしない。
###HTML
<div id="main_contents"> <ul class="slide_show_box"> <!-- 画像を上から下に縦スクロール --> <li><img src="./img/image[0].jpg" /></li> <!-- フェードイン --> <li><img src="./img/image[1].jpg" /></li> <li><img src="./img/image[2].jpg" /></li> <li><img src="./img/image[3].jpg" /></li> <li><img src="./img/image[4].jpg" /></li> <li><img src="./img/image[5].jpg" /></li> </ul> </div>
###jQuery
/** * スライドショー処理 * **/ $(document).ready(function(){ /** * 定数定義 * スライドショービジネスロジック内で使用する定数 * **/ interval = 4000; // スライドを切り替える間隔 slide_default_num = 1; // 画面初期表示時に表示するスライド番号 slide_star_num = 2; // スライドショー開始番号 slide_end_num = 5; // スライドショー終了番号 /** * 画像の初期化 * **/ init(); }); /** * 画像の初期化 * **/ function init() { // すべての画像を非表示 $('.slide_show_box li').hide(); // 1番目の画像を表示 $('.slide_show_box li').eq(slide_default_num).show(); } /** * メイン処理 * **/ function main() { // 各項目 $('.slide_show_box li').hide(); // すべての画像を非表示 $('.slide_show_box li').eq(slide_star_num).show(); //最初の画像を表示 // 画像の縦スクロール scroll_down(); // 次の画像を設定 slide_star_num++; // 画像のフェードイン setTimeout(slideShow, interval); } /** * 画像の縦スクロール * **/ var scroll_y = 0; function scroll_down() { $('#slide_show_box li').eq(slide_star_num).animate({scrollTop: ++scroll_y}, 1000); setTimeout('scroll_down()', 20); } /** * 画像のフェードイン * **/ function slideShow() { // 終了番号を超えた場合 if (slide_star_num > slide_end_num - 1) { // スライドショーを終了 return; } $('.slide_show_box li').eq(slide_star_num - 1).delay(1500).fadeOut(3000).queue(function() { // すべての画像を非表示 $('.slide_show_box li').hide(); $('.slide_show_box li').eq(slide_star_num).fadeIn(3000); slide_star_num++; }); setTimeout(slideShow, interval); }
回答1件
あなたの回答
tips
プレビュー