一定時間がたつと画像が切り替えるスクリプトでございます。jQueryつかってます。
サンプルデモはこちらです。
ファイルのダウンロードはこちらから。
画像を切り替えるスピードなどは簡単に変えることができます。ちなみにスピードのとこの3000というのは3秒のこと。1秒は1000です。
画像を<p id=”gallery”>とかで囲めば表示されます。切り替える画像の数も拡張子も自由に変えれるけれど、画像の名前は1.jpgとか2.pngとか、1、2、3とかの連番でなくてはいけない。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/loading.js" type="text/javascript"></script> </head> <body> <div> <p id="gallery"><img src="img/1.jpg" /></p> </div> </body> </html>
//画像の数 imgLength = 3; //最初に表示する画像 firstInt = 1; //画像を切り替える速さ imgChangeSpeed = 3000; //画像の拡張子 imgExtension = ".jpg"; //画像の保存ディレクトリ imgDirectory = "img/"; randomInt = firstInt + 1; $(function(){ //一定時間毎にスクリプトを呼び出す var t = setInterval(loadImg, imgChangeSpeed); //呼び出されるスクリプト function loadImg(){ $("#gallery").children("img").animate({'opacity':'0'}, 0) $("#gallery").children("img").attr("src",function(){ return imgDirectory + randomInt + imgExtension }).animate({'opacity':'1'}, 800); if(randomInt < imgLength){ randomInt = parseInt(randomInt) + 1; } else{ randomInt = 1; } } });
ほんとはね、ほんとは画像をクロスフェード(なんか溶け込むように変わってくやつ)で切り替えたかったんだけど、めんどくさかったから寝ちゃったんです!
いつかそれも作ります。
会社で隣の席の先輩がグロ画像を喜んで見せてきました。そのせいでもう僕のスィートハートはブレイキンだぜ!
ほんとは「イヤーン!こんな怖いもの見れませんわー!」とか言いながら嬉々として見ていたんですけれども。
childrenって、何でしょうか?