画像の切替（ただ切り替わるだけ） 【jQuery】

◆画像切り替え（アニメーションなし）

html側

<div id="main_box">
<img src="img_03.png" alt="AAA" width="200" height="150" />
</div>

js側

var i=0;

var img_box = new Array();

img_box[0]="img_01.png";
img_box[1]="img_02.png";
img_box[2]="img_03.png";

$(function(){

function slideimg(){
$("#main_box img").attr("src",img_box[i]);
i++;
if(i>=img_box.length){//配列の最後になったら0に戻す
i=0;
}

}

window.setInterval(slideimg,4000);//4秒だったら「slideimg」読んでね

});

setInterval…（インターバルタイマー）定期的に関数を呼び出す。




★アニメーション風にみせたいときはこちら→

★ボタンをクリックしたときにアニメーション風に切り替わるのはこちら→（作業中）



-------------------参考サイト------------------
・配列でのアニメーション for JavaScript　/KSU CAC Wiki
https://sites.google.com/a/cse.kyoto-su.ac.jp/cac-wiki/reference/gamesakusei/arrayanimation


・(タイマー) setInterval
http://www.openspc2.org/JavaScript/ref/timer/setInt.htm

★アニメーションの画像切り替え
・奥から手前にズームするJavaScript「Spacegallery.js」｜skuare.net
http://www.skuare.net/2008/07/javascriptspacegalleryjs.html