TOPページのメイン画像切替をクロスフェードで無限ループさせる時に使用しました。
1.ヘッダー、JavaScriptの記述
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript"> $(function(){ loopanime_start(); }); function loopanime_start(){ var timerId; var imgNo = 8; //画像枚数 var currentNo = 0; var targetNo = 0; var fspeeds=1000; //切り替え時間 //画像にリンクを指定 var links = [ "https://dad-union.com/", "https://dad-union.com/", "https://dad-union.com/", "https://dad-union.com/", "https://dad-union.com/", "https://dad-union.com/", "https://dad-union.com/", "https://dad-union.com/" ]; //画像のalt var alts = [ "画像クロスフェード切替りを無限ループするJs1", "画像クロスフェード切替りを無限ループするJs2", "画像クロスフェード切替りを無限ループするJs3", "画像クロスフェード切替りを無限ループするJs4", "画像クロスフェード切替りを無限ループするJs5", "画像クロスフェード切替りを無限ループするJs6", "画像クロスフェード切替りを無限ループするJs7", "画像クロスフェード切替りを無限ループするJs8" ]; (function(){ for(var i=1; i<=imgNo; i++){ $('<div id="rImg'+i+'">').appendTo($('#idMainimg01')); var img = $('<img>').attr('src','images/i0'+i+'.jpg');//画像パスとファイル名指定 img.attr('alt',alts[i-1]); img.load(imgLoaded.call(img, i)); } })(); function imgLoaded(no){ var obj = $('#rImg'+no); obj.children('img').remove(); obj.append($(this)); $('<a href="'+links[no-1]+'" />').append(this).appendTo(obj); if(no==1) loop(); } function loop(){ if(currentNo!=0) $('#rImg'+currentNo).fadeOut(fspeeds); if(targetNo==0) currentNo = ++currentNo>imgNo?1:currentNo; else currentNo = targetNo; targetNo = 0; $('#rImg'+currentNo).fadeIn(fspeeds); timerId = setTimeout(loop, 6000) } } </script>
2.css記述
(以下のcssは調整してみて下さい)
#idMainimg01 { position:relative; width:179px; height:200px; text-align:center; z-index:2; margin:0 auto; } #idMainimg01 div { display:none; position:absolute; left:0; top:0; }
3.HTMLの記述
<div id="idMainimg01"><noscript><img src="images/i01.jpg" alt="画像クロスフェード切替りを無限ループするJs" width="179" height="200"></noscript></div>
4.補足
画像ファイル名ですが、
images/i01.jpg
images/i02.jpg
~
images/i08.jpg
の様に画像数分数値にする必要があります。
上記のJavaScriptの記述を色々と調整・カスタマイズしたりして使用してます。