jQueryを使って複数画像をフェードインフェードアウトで切替表示

今回はシンプルに3枚のjpg画像をフェードインフェードアウトで切替表示し、
setIntervalを使用して切替えを繰り返してみます。
1.CSSの記述例
以下は調整してみて下さい。
<style type="text/css"> <!-- .clImg{ position:relative; width:200px; margin:0 auto; } .clImg img { position:absolute; left:0; top:0; } --> </style>
2.読込むJsとJavaScriptの記述例
<script type="text/javascript" src="jquery-1.9.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.clImg img:gt(0)').hide(); setInterval(function() { $('.clImg :first-child').fadeOut().next('img').fadeIn().end().appendTo('.clImg'); },3000); }); </script>
3.HTMLの記述例
<div class="clImg"> <img src="i01.jpg" alt="1枚目の画像"> <img src="i02.jpg" alt="2枚目の画像"> <img src="i03.jpg" alt="3枚目の画像"></div>
jQueryを使用して複数画像をフェードインフェードアウトで切替表示デモ
左右の矢印や切替り画像枚数のチップ画像(コントローラ?)的なものが必要無い場合はこれがシンプルで良い気がしますね。
※流用される場合は自己責任でお願いします。
-
前の記事
iscroll.js:スマホサイトで上下固定バーを実装してみる 2019.04.15
-
次の記事
jquery.colorbox.jsを使用してlightbox風に別URL先のページを表示 2019.04.17