*

-jQuery-自動で画像のフェードイン・フェードアウトをする方法

公開日: : 最終更新日:2014/07/03 css3, html5, jquery, 未分類

今回は、自動で画像を切り替える方法について調べてみました。
(フェイドイン・フェイドアウトのみ)

スライドショーと少し違って、画像の切り替えのみです。

スライドショーは、次へ進むボタンなど、ユーザーが操作できる機能がついていますが、

今回のものは、ユーザーが操作できません。

ただ、画像の切り替えするのみです。

なので、設置方法も簡単です。

余計な機能がいらないという場合には、すごく便利だと思います。

まずは、デモを見てください。
デモ01

以下にソースを記載します。
今回使用する、スタイルシートは、
index.css
以上の1つです。

scriptは、
cos.js
以上の1つを使用します。

以下がindex.htmlのファイルです。
index.htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<title>-jQuery-自動で画像のフェードイン・フェードアウトをする方法</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css" />

</head>
<body>





<div id="wrp">
          <div id="mainImg">
               <img src="images/01.jpg" alt="" width="100%" height="100%"/>
               <img src="images/02.jpg" alt="" width="100%" height="100%"/>
               <img src="images/03.jpg" alt="" width="100%" height="100%"/>
               <img src="images/04.jpg" alt="" width="100%" height="100%"/>
          </div><!--mainImg-->
</div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/cos.js"></script>
</body>
</html>

次に、スタイルシートです。
index.css

@charset "UTF-8";
/* CSS Document */

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	font-size:12px;
	width: 100%;
	color:#ffffff;
}

#wrp {
	width:1000px;
	height:500px;
	background-color:rgba(0,0,0,0.5);
	margin:100px auto;
}

#mainImg {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	text-align: left;
	overflow: hidden;
	position: relative;
}

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

最後にjsファイルです。
cos.js

$(function(){
	var setImg = '#mainImg';
	var fadeSpeed = 500;//フェイドが完了する時間
	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);
});

以上で完成です。

今回参考にした、サイトがありますのでこちらも参考にしてみてください。
Web初心者がjQuery 自動で画像のフェードイン・フェードアウトを実装する方法(サンプル付き)

今回デモ01で使用したファイルをUPしときましたので、
よかったら参考にしてみてください。

ダウンロード


関連記事

no image

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

エラーページの表示方法。 .htaccessに書く。ErrorDocument 404使用。

今回は、エラーページの表示方法について。調べてみました。 まず、エラーページとはなにか? エ

記事を読む

no image

ドラッグの色を変更する。::selectionを使用する。

今回は、ドラッグした時に色の変更方法を書いてみました。 通常では、ドラッグをしたときは、白にな

記事を読む

no image

jqueryを使って画像を回転させる。jQueryRotateを使用

今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単

記事を読む

no image

-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法

今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。 スクロールしたら

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

no image

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

no image

スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)

今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑