javascriptでスライドショー
適当にぐぐってみたところ、順番にスライドしていくのは簡単に見つかったが
ランダムで表示したかったのでその中の一例をPHPで使いやすいように改良してみた。
参考（http://www.greenwich.co.jp/blog-archives/p/1903）
画像が連番になっていて（img_1,img_2・・・）
PHP側のループを使ってjavascriptを作成する。
***slideshow.js***
var current_num =1; //初期値1をセット
var max_num = 5; //画像の最大値
var next_num = 1;
var img_str ="#img_"; //画像の指定用の文字列
$(function(){
setInterval(function() {
while(next_num == current_num){
//1～最大値の範囲で乱数生成
next_num = Math.floor( Math.random() * max_num )+1;
}
//画像指定の文字列を作る
var current_img = img_str + current_num;
var next_img = img_str + next_num;
$(current_img).fadeOut(2000);
$(next_img).fadeIn(2000);
current_num = next_num;
}, 5000); //setInterval()で5秒間隔で繰り返し実行する
});
**********
***slide.html***
<head>
<meta http-equiv="Content-Type" content="text/html; charaset=UTF-8" >
<link rel="stylesheet" type="text/css" href="slideshow.css">
<script "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="slideshow2.js"></script>
</head>
<body>
<p id="stage">
<img src="D:\javascript_dir\img\vivi_01.png" id="img_1">
<img src="D:\javascript_dir\img\vivi_02.png" id="img_2">
<img src="D:\javascript_dir\img\vivi_03.png" id="img_3">
<img src="D:\javascript_dir\img\vivi_04.png" id="img_4">
<img src="D:\javascript_dir\img\vivi_05.png" id="img_5">
</p>
</body>
***********
*** slideshow.css***
/* 一度画像を全てを非表示にして、absoluteを指定して画像を重ねる */
#stage img{
display:none;
position: absolute;
}
#stage #img_1{
/* 1枚目の画像だけを表示 */
display:block;
}
