jQuery(ジェイクエリ) スライダー │備忘録

By sk, 2014/06/22

Pocket
LINEで送る

備忘録│簡易jQuery(ジェイクエリ) スライダー

毎日コーディングはしないので、忘れないように記録。

※個人的な記録なので、動作を保障するものではございません。

1.<head>の中にjQueryを呼び出すスクリプトを入れる
※記述のみでOK!(ただし、ネット環境がないと動きません。)

<script "text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

2.jQueryを記述する

<script "text/javascript">
var flg=1;    //flgに初期値1をセット

$(function(){
setInterval(function() {
switch(flg){
case 1: //flgが1の場合
//1枚目から2枚目に切り替え
$("#img1").fadeOut(2000);
$("#img2").fadeIn(2000);
break;

case 2: //flgが2の場合
//2枚目から3枚目に切り替え
$("#img2").fadeOut(2000);
$("#img3").fadeIn(2000);
break;

case 3: //flgが3の場合
//3枚目から4枚目に切り替え
$("#img3").fadeOut(2000);
$("#img4").fadeIn(2000);
break;

case 4: //flgが4の場合
//4枚目から1枚目に切り替え

$("#img4").fadeOut(2000);
$("#img1").fadeIn(2000);
break;
}

 flg++;
if(flg>4){
flg=1;    //flgが4を越えたら1に戻る
}
}, 2000);    //setInterval()で2秒間隔で繰り返し実行する
});
</script>

3.cssを記述する

<style type="text/css">
#wrapper{
        width:500px;
	height:185px;/*高さ指定をしておかないとスライダーの下にくるものがずれるので注意*/
	position:relative;/*スライダー値固定の為、大元にrelativeを指定*/
}

	
#slider{
	width:500px;
	height:185px;
}
/*  一度、画像を全てを非表示にして、absoluteを指定して画像を重ねる */

#slider img{
display:none;
position:absolute;
top:0;/*この場合#wrapper(relative)の位置から0*/
left:0;
}

#slider #img1{
/* 1枚目の画像だけを表示 */
display:block;
}
</style>

4.HTMLを記述する

<div id="wrapper">
<div id="slider">
<img id="img1" src="images1.jpg" />
<img id="img2" src="images2.jpg" /> 
<img id="img3" src="images3.jpg" />
<img id="img4" src="images4.jpg" />
</div>
</div>

完成デモ http://happy111224.com/slider_test.html

【参考にしたサイト】 http://www.greenwich.co.jp/blog-archives/p/1903

Pocket
LINEで送る

What do you think?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です