【Javascript】jQueryをつかった一定時間で画像を切り替えるスクリプト(フェードイン)

一定時間がたつと画像が切り替えるスクリプトでございます。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;
		}
	}
});

ほんとはね、ほんとは画像をクロスフェード(なんか溶け込むように変わってくやつ)で切り替えたかったんだけど、めんどくさかったから寝ちゃったんです!

いつかそれも作ります。

会社で隣の席の先輩がグロ画像を喜んで見せてきました。そのせいでもう僕のスィートハートはブレイキンだぜ!

ほんとは「イヤーン!こんな怖いもの見れませんわー!」とか言いながら嬉々として見ていたんですけれども。

  • このエントリーをはてなブックマークに追加

PICxPIC

会社を経営する30代男性。iPhoneアプリをつくったりしながら毎日ぴくぴく生きてます。

関連記事

  1. NO IMAGE
  2. NO IMAGE
  3. NO IMAGE
  4. NO IMAGE
  5. NO IMAGE
  6. NO IMAGE

コメント

  1. 藤原 2020.11.01 10:18am

    childrenって、何でしょうか?

プロフィール

PICxPIC
1983年生まれ。2010年からiOSアプリを開発し、2012年に法人化。メディア掲載やランキング、ダウンロード数などの詳しい実績などはこちら

PICxPICのアプリ

赤ちゃんの大冒険

おさるランド

動物オーケストラ2

子どもゲームランド

おしゃべりボタン

天空までのぼれ!

ジャンプで川下り

ひよこランド

動物オーケストラ

ポコポコアニマル

キラキラお絵かき

音が出るお絵かき

あいづちん