Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

jQuery

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

投稿日:

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

今回は、web初心者向けに簡単にフェードイン・フェードアウトするスライドショーのjQueryを実装します。コードも数行しかないので簡単にできると思います。

photo credit: magro_kr via photopin cc

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。
これが無いと動きません。

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

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

$(document).ready(function(){
	$('.slideimg img:gt(0)').hide();
	
	setInterval(function() {
		$('.slideimg :first-child').fadeOut().next('img').fadeIn().end().appendTo('.slideimg');},4000);
});

:gt(index)

マッチした要素のうち、指定されたインデックス(0から始まる)より大きいインデックス番号の要素を返します。

HTMLを設置します STEP3

<div class="slideimg">
    <img src="images/016/01.jpg" />
    <img src="images/016/02.jpg" />
    <img src="images/016/03.jpg" />
    <img src="images/016/04.jpg" />
    <img src="images/016/05.jpg" />
    <img src="images/016/06.jpg" />
</div>

<div id="slideimg">も忘れないでください。CSSで制御する箇所がありますので。

CSSを記述します STEP4

.slideimg{
	position:relative;
	width: 680px;
	margin:0 auto;
}
.slideimg img {
	position:absolute;
	left:0;
	top:0;
}

画像を一つに重ねるCSSをつけました。

まとめ

[サンプル] jQuery 簡単に実装できる自動で画像のフェードイン・フェードアウトの実装方法

よくわからなかった人もいるかもしれませんが、このサンプルのソースを全部コピーしても使えます。(画像のパスは環境に合わせてください)
画像が自動で変わるjQueryは、サイトのメイン画像などでよく使われますのでぜひ試してみてください。

※firefox、クローム、IEで動いていることを確認しております。

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-jQuery

Copyright© Sedori Plan , 2019 All Rights Reserved.