Web初心者がjQuery 自動で画像のフェードイン・フェードアウトを実装する方法(サンプル付き)

更新日：2014年7月1日

今回は、web初心者向けに自動で画像のフェードイン・フェードアウトするjQueryを実装します。

Web初心者がjQuery 自動で画像のフェードイン・フェードアウトを実装する方法(サンプル付き)

photo credit: James Dennes via photopin cc

ページコンテンツ

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

1	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

実際に動く記述を書きます STEP2

<script type="text/javascript">
$(function(){
	var setImg = '#mainImg';
	var fadeSpeed = 1500;
	var switchDelay = 5000;

	$(setImg).children('img').css({opacity:'0'});
	$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

	setInterval(function(){
		$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
	},switchDelay);
});
</script>

$(function(){

var setImg = '#mainImg';

var fadeSpeed = 1500;

var switchDelay = 5000;

$(setImg).children('img').css({opacity:'0'});

$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

setInterval(function(){

$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);

},switchDelay);

});

</script>

HTMLを設置します STEP3

<div id="mainImg">
    <img src="images/006/01.jpg" />
    <img src="images/006/02.jpg" />
    <img src="images/006/03.jpg" />
    <img src="images/006/04.jpg" />
    <img src="images/006/05.jpg" />
    <img src="images/006/06.jpg" />
</div>

</div>

画像は何枚でも大丈夫です。
＜div id="mainImg"＞も忘れないでください。CSSで制御する箇所がありますので。

CSSを記述します STEP4

#mainImg {
	margin: 0 auto;
	width: 680px;
	height: 510px;
	text-align: left;
	overflow: hidden;
	position: relative;
}

#mainImg img {
	top: 0;
	left: 0;
	position: absolute;
}