＜script type=”text/javascript” src=”/incj/jquery.1.9.1.min.js” >＜/script>
＜script type=”text/javascript”>
var gctr = 1;
var gazot = new Array();
gazot[0] = “http://****/001.jpg”;
gazot[1] = “http://****/002.jpg”;
gazot[2] = “http://****/003.jpg”;
gazot[3] = “http://****/003.jpg”;
$(function() {
setInterval(“slide_s()”, 10000);
});
function slide_s(){
$(‘#box1’).fadeOut(1000,gazonext_s);
$(‘#box1’).fadeIn(1000);
}
function gazonext_s(){
gctr ++;
if (gctr>4){ gctr = 1; }
var gazo = gazot[gctr-1];
$(‘#box1 img’).attr(‘src’, gazo);
}
＜/script>

で囲ってやると、

が足されず、
もつきません。ブラウザは、この部分をJavaScriptとして読み込み、実行してくれます。

$(function(){がjQueryのスタート部分です。ここでは単純にsetIntervalでタイマーをセットしています。実際にはAjax等との組み合わせで、setTimeoutの方が実用的だと思いますが、その違いはまた別の機会に。
実際の処理部分のslide_s()に、fadeOutとfadeInを書きます。
fadeOut(1000,gazonext_s)は、コールバックという関数の書き方です。
つまりfadeOutが終了した時にgazonext_sが呼ばれるということになります。
これを単純に一行づつ書いてしまうと、fadeOutの途中、あるいはその前にgazonext_sに処理が移り、旧画像が消えないうちに、新しい画像に変わってしまうということが起こります。
逐次（同期）処理では問題ありませんが、fadeOutのような非同期処理のプログラムには、コールバック関数を意識しておく必要があります。

ここでは、あらかじめ複数の画像を配列としてセットしてあります。実際のサイトで画像や記事を変えてゆくのには、次々と新しい情報を提供する方がシステムとしての付加価値は高くなります。
そのためには、Ajaxを使ってサーバーと通信し、その情報を取得しHTMLにセットすることが必要となるでしょう。フェードインやスライドショーは、やはりAjaxとセットと考えるのがいいと思います。

Ajaxに関してはまたの機会に……。

 共有元ページ