質問編集履歴

3 スライドショー完成イメージを追記

Win7_TK

Win7_TK score 10

2017/02/19 19:08  投稿

jQueryでli内の画像を縦スクロール、フェードインさせる方法
###前提・実現したいこと
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);
}
```
  • HTML

    13887 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    9386 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2 発生している問題を追記

Win7_TK

Win7_TK score 10

2017/02/19 14:27  投稿

jQueryでli内の画像を縦スクロール、フェードインさせる方法
###前提・実現したいこと
jQueryを使用しまして、1枚目の画像(image[0].jpg)は自動で縦スクロール、2枚目以降をフェードインさせたいのですが、
プラグインを使用せず、縦スクロール、フェードインの両方を満たす様に自作することは可能でしょうか。
jQueryを使用しまして、1枚目の画像(image[0].jpg)は自動で縦スクロール、2枚目以降をフェードインさせたいのですが、プラグインを使用せず、縦スクロール、フェードインの両方を満たす様に自作することは可能でしょうか。
画像はそれぞれ1回のみ表示させ、ループはしないよう考えています。
1枚目の画像(image[0].jpg)は、他の画像より高さが長いものになります。
こちらに関し、わかる方いましたら、ご教授のほどよろしくお願いします。
※現時点でのjQueryの処理を追記しました。
 
###発生している問題  
縦スクロールをさせようと、animateを記述してみましたが、  
書き方が間違っているか、他に処理が必要なのかうまく動作しませんでした。  
###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);
}
```
  • HTML

    13887 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    9386 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 jQueryの処理を追記

Win7_TK

Win7_TK score 10

2017/02/19 14:06  投稿

jQueryでli内の画像を縦スクロール、フェードインさせる方法
###前提・実現したいこと
jQueryを使用しまして、1枚目の画像(image[0].jpg)は自動で縦スクロール、2枚目以降をフェードインさせたいのですが、
プラグインを使用せず、縦スクロール、フェードインの両方を満たす様に自作することは可能でしょうか。
画像はそれぞれ1回のみ表示させ、ループはしないよう考えています。
1枚目の画像(image[0].jpg)は、他の画像より高さが長いものになります。
こちらに関し、わかる方いましたら、ご教授のほどよろしくお願いします。
※現時点でのjQueryの処理を追記しました。  
 
###HTML
```
<div>
 <ul>
<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);  
}  
```
  • HTML

    13887 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    9386 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る