JavaScript

jQueryとsetIntervalを使って複数画像を一定間隔で切替える方法

  /

jQueryとsetIntervalを使って複数画像（png）を一定間隔で切替えるアニメーション方法をご紹介します。

Contents
  1. 複数画像（png）を一定間隔で切替えるエリアのCSSの記述
  2. jQueryとsetIntervalを使って複数画像を一定間隔で切替えるJavaScriptの記述
  3. 複数画像（png）を一定間隔で切替えるエリアのHTMLの記述
  4. jQueryとsetIntervalで複数のpng画像一定間隔で切替えるアニメーションデモページ

複数画像（png）を一定間隔で切替えるエリアのCSSの記述

※必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:18px;
	font-weight:bold;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:center;
}
-->
</style>

jQueryとsetIntervalを使って複数画像を一定間隔で切替えるJavaScriptの記述

※jquery.min.js（1.8系）ファイルを読み込みます。setIntervalで500ms毎に4枚の画像を切替える様に設定します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var count = setInterval(changeImg, 500);//ミリ秒数
    i = 1;
    function changeImg(){
        $("#idImgchng").children("img").attr("src","i" + i + ".png");
        if(i <= 3){	//4枚の画像を切替
            i++;
        }else{
            i = 1;
        }
    }
});
</script>

複数画像（png）を一定間隔で切替えるエリアのHTMLの記述

※id=”idImgchng”エリア内のimg画像を切り替えます。

<div id="idImgchng">
    <img src="i1.png" width="200" height="200">
</div>

jQueryとsetIntervalで複数のpng画像一定間隔で切替えるアニメーションデモページ

jQueryとsetIntervalで複数のpng画像一定間隔で切替えるアニメーションデモページ

この程度であればアニメーションgif画像でも良いと思います。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

画像切替 setInterval
RELATED POST