Web技術系中心に割と何でも更新中

【jQuery】フェードタイプの自作スライダーを実装する方法

Programming Web

疑問に思う人

Web制作者
「サイトにスライダーを表示させたいけど、jQueryプラグインだと機能もコードも余分に多いなぁ。もっとシンプルなものを作りたいけどどうやって作るんだろう?」

こういった悩みにお答えします。

本記事の内容

  • jQueryでフェードタイプの自作スライダーを実装する方法

こんにちは、mine(@mineblog7)です。

ブログ歴は4年ほどになります。
現在はmineblogを一人で運営しています。

Webサイトでコンテンツを目立たせるために、画像のスライダーが使われることがあります。スライダーは一定間隔で画像などのコンテンツが切り替わって表示される仕組みです。jQueryプラグインslickなどが有名です。

jqueryプラグインや、WordPressプラグインを使用したスライダーの実装はとても簡単で便利です。しかし、便利な機能であるがゆえにデメリットもあります。

プラグインでのスライダー実装のデメリット

  • HTML・CSS・JavaScriptのコードが複雑になる
  • カスタマイズしにくい

「スライダーにプラグインほどの機能は必要ない」、「コードをシンプルにしたい」という方向けに、今回はjQueryでフェードタイプの自作スライダーを実装する方法をご紹介します。

自作スライダーの仕様

この記事で紹介する自作スライダーの仕様は下記の通りです。

仕様

  • 一定間隔で画像のフェード切り替えを繰り返す
  • フェード切り替えの間隔を指定可能
  • フェード時間を指定可能
  • 画像はimgタグを並べるだけ

動作イメージ

フェード切り替え動作イメージ

上のように、複数の画像が一定間隔でフェード切り替えするようにします。

この仕様でスライダーを実装します。

スライダーの実装方法

具体的にスライダーの実装方法を詳しく紹介します。

HTML

<div class="origin-slider">
	<img src="【ファイルパス1】" width="900" height="600" />
	<img src="【ファイルパス2】" width="900" height="600" />
	<img src="【ファイルパス3】" width="900" height="600" />
</div>

HTMLは非常にシンプルで、要素<div class="origin-slider"></div>を記述して、その子要素に<img>タグを複数記述します。

CSS

.origin-slider {
	position: relative;
}
.origin-slider img {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 100%;
	height: auto;
}

<img>に対して、position:absolute;を設定しているところがポイントで、同じ位置に画像を設定(画像を重ねる)することで、フェードイン・フェードアウトのタイミングで表示が一瞬崩れてしまうのを回避しています。

jQuery

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>

上記jQueryを<head>内に記述します。

$(function(){
	var set_image = '.origin-slider';
	var speed = 1500;// フェードの時間
	var delaytime = 5000;// スライド切り替え間隔
	// 最初の表示
	$(set_image).children('img').css({opacity:'0'});
	$(set_image + ' img:first').stop().css({opacity:'1',zIndex:'20'});
	// 一定間隔で画像のフェードを繰り返す
	setInterval(function(){
		$(set_image + ' :first-child').animate({opacity:'0'},speed).next('img').animate({opacity:'1'},speed).end().appendTo(set_image);
	},delaytime);
});

ソースコードについて詳しく見ていきましょう。

最初の表示

ページが表示されたときに、まず<img>タグすべてに対して、.css()メソッドでopacity:0;を設定して完全に透明にします(見た目は何も表示されていない)。

その直後に、一番先頭の<img>タグに対して.css()メソッドでopacity:1;、zIndex:20;を設定して、画像が表示されるようにします。

一定間隔で画像のフェードを繰り返す

まず変数speed(フェードする時間)、delaytime(スライド切り替え間隔)を宣言します。

setIntervalメソッド(処理, 処理間隔)を使用して、一定間隔で繰り返し処理を行います。ここでは処理間隔にdelaytime(スライド切り替え間隔)を設定します。

処理の流れとしては以下の通りです。

jQueryを使用した処理の流れ

  • 先頭の<img>タグをフェードアウトさせる
  • 2番目の<img>タグをフェードインさせる
  • .end()メソッドで、先頭の<img>タグを再度選択させる
  • .appendTo()メソッドで先頭の<img>タグを最後尾に移動させる
メソッドチェーンにより、処理を一つの連続したコードにまとめることができます。

まとめ

フェードタイプの自作スライダーを実装する方法について再度まとめます。

ポイント

  • <img>タグでスライダーに表示させたい画像を複数用意する
  • 画像はabsoluteで重ねるように配置する
  • setIntervalメソッドとチェーンメソッドで、一定間隔で画像のフェードを繰り返す

これだけでフェードタイプのスライダーが実装できてしまうので簡単です。
参考になりそうだと思ったら試してみてください。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果