質問: 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); } ```
回答: 取りあえずこんな感じで動くと思います。 動きの補助としてCSSも追加しましたが、要点となるところはほんの一部です(`/* ! */`で印をしました)。 サンプル https://jsfiddle.net/ubnxp7b7/2/ ``` /** * スライドショー処理 * **/ $(document).ready(function(){ /** * 定数定義 * スライドショービジネスロジック内で使用する定数 * **/ interval = 4000; // スライドを切り替える間隔 slide_default_num = /*1*/0; // 画面初期表示時に表示するスライド番号 slide_star_num = /*2*/0; // スライドショー開始番号 slide_end_num = 5; // スライドショー終了番号 /** * 画像の初期化 * **/ init(); }); /** * 画像の初期化 * **/ function init() { // すべての画像を非表示 $('.slide_show_box li').hide(); // 1番目の画像を表示 $('.slide_show_box li').eq(slide_default_num).show(); main(); // ← mainを実行するよう追加 } /** * メイン処理 * **/ 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).css({top: "200px"}).animate({top: 0}, 1000); /* ! */ } /** * 画像のフェードイン * **/ function slideShow() { // 終了番号を超えた場合 if (slide_star_num > slide_end_num/* - 1*/) { // ← -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); } ``` ``` #main_contents { display: table; outline: 3px solid #000; overflow: hidden; /* ! */ } #main_contents ul { margin: 0; padding: 0; list-style-type: none; } #main_contents li { position: relative; /* ! */ display: none; } #main_contents img { vertical-align: bottom; } ``` 要点1 CSS `#main_contents { overflow: hidden; }` と `#main_contents li { position: relative; }` が重要なポイントになります。 `position: relative;` は、**要素の位置を元の場所から指定した長さだけ移動できる**指定です。MDN position 通常はこれを用いると同時に`top: 50px;`(=上から50px移動させる)などを指定して使います。 今回は`top`の指定をJavaScriptの方で行っています。 `overflow: hidden;`は、その**要素からはみ出した子要素を非表示にする**という指定です。MDN overflow この指定がない場合、親要素からはみ出した子要素が表示されます。つまり、上の`position: relative;`で``の位置をずらしても、はみ出た部分まで表示されてしまします。 `overflow: hidden;`を指定することで、div枠内で映画のエンドロールのように下から上へスクロールするように見せることができるのです。 要点2 JavaScript `$('.slide_show_box li').eq(slide_star_num).css({top: "200px"}).animate({top: 0}, 1000);` まず`.css({top: "200px"})`で画面初期表示時に表示するスライドの初期位置を指定します。この場合、上から200pxの位置にスライドをずらすので、最初はスライドが下に完全に埋まっている状態になります。 (200pxの値は画像の縦の長さに合わせて変更してください。) 次に`.animate({top: 0}, 1000);`とすることで、1秒かけてスライドを枠内に表示することが出来ます。 尚、`setTimeout`を使って`scroll_down`を再帰的に呼び出す必要はありません。`.animate()`を一度実行することで最後までアニメーションを実行してくれるからです。 また、残念ながら`scrollTop`は用途が違います。`scrollTop`は、その要素にスクロールバーがある場合に、そのスクロール位置を変更するためのものです。(ページをスクロールするときによく使います。)