jQueryとsetIntervalを使って複数画像(png)を一定間隔で切替えるアニメーション方法をご紹介します。
Contents
ディスプレイ広告
複数画像(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アナリティクスタグは流用しないで下さい。