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
What do you think?