jQuery ---- メインビジュアル切り替わり


企業のトップページ等でよく見る左右どっちかに「切り替えボタン」があって、それと連動してメインビジュアルがタイムインターバルで切り替わっていくのがあります。

これをjQueryプラグインの「featureList」を使って再現してみようと思います。

## サンプルその①、、、タブをクリック後に画像が切り替わる

↓完成サンプルを以下にアップしたので動きはそちらでみて下さい。
[http://m-uehara.com/mv_slide001/](http://m-uehara.com/mv_slide001/ "mv_slide001")

ファイルダウンロードは
[mv_slide001.zip](http://m-uehara.com/mv_slide001.zip "mv_slide001.zip")です。



①完成図、、右のタブをクリックすると連動して左のウィンドウも切り替わり、更に時間式でタブが切り替わっていくやつです。
![jqメインきりかえ001.jpg](https://qiita-image-store.s3.amazonaws.com/0/35975/27c9af0c-a0af-93d6-a0ca-875b7db3ed3f.jpeg "jqメインきりかえ001.jpg")

②ファイル構成

* index.html

* featureList-1.0.0.js

* featureList.css

の３つです。

③コード

３つのファイルのコードを書いておきます。

```index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Contents-Script-Type" content="text/javascript" />
<title>メインビジュアル切り替わり</title>
<link href="common/css/featureList.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="common/js/jquery.featureList-1.0.0.js"></script>

	<script language="javascript">
		$(document).ready(function() {
			$.featureList(
				$("#tabs li a"),
				$("#output li"), {
					start_item	:	0
				}
			);
		});
	</script>


</head>
<body>


<div id="feature_list">

<ul id="tabs">
<li id="tab01"><a href="javascript:;">タブ1</a></li>
<li id="tab02"><a href="javascript:;">タブ2</a></li>
<li id="tab03"><a href="javascript:;">タブ3</a></li>
<li id="tab04"><a href="javascript:;">タブ4</a></li>
<li id="tab05"><a href="javascript:;">タブ5</a></li>
</ul><!-- / #tabs -->

<ul id="output">
<li><a href="#"><img src="common/images/feature_img/MV_1.jpg" /></a></li>
<li><a href="#"><img src="common/images/feature_img/MV_2.jpg" /></a></li>
<li><a href="#"><img src="common/images/feature_img/MV_3.jpg" /></a></li>
<li><a href="#"><img src="common/images/feature_img/MV_4.jpg" /></a></li>
<li><a href="#"><img src="common/images/feature_img/MV_5.jpg" /></a></li>
</ul><!-- / #output -->

</div><!-- / #feature_list -->

</body>
　
</html>

```

```featureList.js
/*
 * FeatureList - simple and easy creation of an interactive "Featured Items" widget
 * Examples and documentation at: http://jqueryglobe.com/article/feature_list/
 * Version: 1.0.0 (01/09/2009)
 * Copyright (c) 2009 jQueryGlobe
 * Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License
 * Requires: jQuery v1.3+
*/
;(function($) {
	$.fn.featureList = function(options) {
		var tabs	= $(this);
		var output	= $(options.output);

		new jQuery.featureList(tabs, output, options);

		return this;	
	};

	$.featureList = function(tabs, output, options) {
		function slide(nr) {
			if (typeof nr == "undefined") {
				nr = visible_item + 1;
				nr = nr >= total_items ? 0 : nr;
			}

			tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');

			output.stop(true, true).filter(":visible").fadeOut();
			output.filter(":eq(" + nr + ")").fadeIn(function() {
				visible_item = nr;	
			});
		}

		var options			= options || {}; 
		var total_items		= tabs.length;
		var visible_item	= options.start_item || 0;

		options.pause_on_hover		= options.pause_on_hover		|| true;
		options.transition_interval	= options.transition_interval	|| 5000;

		output.hide().eq( visible_item ).show();
		tabs.eq( visible_item ).addClass('current');

		tabs.click(function() {
			if ($(this).hasClass('current')) {
				return false;	
			}

			slide( tabs.index( this) );
		});

		if (options.transition_interval > 0) {
			var timer = setInterval(function () {
				slide();
			}, options.transition_interval);

			if (options.pause_on_hover) {
				tabs.mouseenter(function() {
					clearInterval( timer );

				}).mouseleave(function() {
					clearInterval( timer );
					timer = setInterval(function () {
						slide();
					}, options.transition_interval);
				});
			}
		}
	};
})(jQuery);

```


```featureList.css
@charset "UTF-8";
/* CSS Document */

div#feature_list {
width: 960px;
height: 296px;
overflow: hidden;
position: relative;
}

div#feature_list ul {
position:relative;
top: 0;
list-style: none;
padding: 0;
margin: 0;
}

ul#tabs {
float:right;
z-index: 2;
width: 231px;
}

ul#tabs li#tab01 a {
background:url(../images/feature_img/tab_a_01.jpg) no-repeat;
text-indent: -9999px;
display: block;
height: 59px;
width: 231px;
overflow: hidden;
}

ul#tabs li#tab01 a:hover {
background:url(../images/feature_img/tab_o_01.jpg) no-repeat;
}

ul#tabs li#tab01 a.current {
background:url(../images/feature_img/tab_o_01.jpg) no-repeat;
}


ul#tabs li#tab02 a {
background:url(../images/feature_img/tab_a_02.jpg) no-repeat;
text-indent: -9999px;
display: block;
height: 59px;
width: 231px;
overflow: hidden;
}

ul#tabs li#tab02 a:hover {
background:url(../images/feature_img/tab_o_02.jpg) no-repeat;
}

ul#tabs li#tab02 a.current {
background:url(../images/feature_img/tab_o_02.jpg) no-repeat;
}

ul#tabs li#tab03 a {
background:url(../images/feature_img/tab_a_03.jpg) no-repeat;
text-indent: -9999px;
display: block;
height: 59px;
width: 231px;
overflow: hidden;
}

ul#tabs li#tab03 a:hover {
background:url(../images/feature_img/tab_o_03.jpg) no-repeat;
}

ul#tabs li#tab03 a.current {
background:url(../images/feature_img/tab_o_03.jpg) no-repeat;
}

ul#tabs li#tab04 a {
background:url(../images/feature_img/tab_a_04.jpg) no-repeat;
text-indent: -9999px;
display: block;
height: 59px;
width: 231px;
overflow: hidden;
}

ul#tabs li#tab04 a:hover {
background:url(../images/feature_img/tab_o_04.jpg) no-repeat;
}

ul#tabs li#tab04 a.current {
background:url(../images/feature_img/tab_o_04.jpg) no-repeat;
}


ul#tabs li#tab05 a {
background:url(../images/feature_img/tab_a_05.jpg) no-repeat;
text-indent: -9999px;
display: block;
height: 60px;
width: 231px;
overflow: hidden;
}

ul#tabs li#tab05 a:hover {
background:url(../images/feature_img/tab_o_05.jpg) no-repeat;
}

ul#tabs li#tab05 a.current {
background:url(../images/feature_img/tab_o_05.jpg) no-repeat;
}



ul#output {
left: 0;
width: 738px;
height: 296px;
position: relative;
z-index: 0;
}

ul#output li {
position: absolute;
width: 738px;
height: 296px;
}

```


## サンプルその②、、、マウスオーバーすると画像が切り替わる。

バリエーション違いで、イベント発生がクリック(click)でなく、マウスオーバー(on_hover)にしたものです。
変更点はJavaScriptファイルのみ変更しました。

完成サンプルは↓
[http://m-uehara.com/mv_slide002/](http://m-uehara.com/mv_slide002/ "mv_slide002")
ファイルダウンロードは
[mv_slide002.zip](http://m-uehara.com/mv_slide002.zip "mv_slide002.zip")です。

* 以下、変更したJavaScriptファイルです。↓

```featureList.js

/*
 * FeatureList - simple and easy creation of an interactive "Featured Items" widget
 * Examples and documentation at: http://jqueryglobe.com/article/feature_list/
 * Version: 1.0.0 (01/09/2009)
 * Copyright (c) 2009 jQueryGlobe
 * Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License
 * Requires: jQuery v1.3+
*/
;(function($) {
	$.fn.featureList = function(options) {
		var tabs	= $(this);
		var output	= $(options.output);
		new jQuery.featureList(tabs, output, options);
		return this;	
	};

	$.featureList = function(tabs, output, options) {
		function slide(nr) {
			if (typeof nr == "undefined") {
				nr = visible_item + 1;
				nr = nr >= total_items ? 0 : nr;
			}

			tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');

			output.stop(true, true).filter(":visible").fadeOut();
			output.filter(":eq(" + nr + ")").fadeIn(function() {
				visible_item = nr;	
			});
		}

		var options			= options || {}; 
		var total_items		= tabs.length;
		var visible_item	= options.start_item || 0;

		options.pause_on_hover		= options.pause_on_hover		|| true;
		options.transition_interval	= options.transition_interval	|| 6000;

		output.hide().eq( visible_item ).show();
		tabs.eq( visible_item ).addClass('current');

		tabs.hover(function() {
			if ($(this).hasClass('current')) {
				return false;	
			}

			slide( tabs.index( this) );
		});

		output.hover(function() {
			clearInterval( timer );
		},function() {
			timer = setInterval(function () {
				slide();
			}, options.transition_interval);
		});

		if (options.transition_interval > 0) {

			var timer = setInterval(function () {
				slide();
			}, options.transition_interval);

			if (options.pause_on_hover) {
				tabs.mouseenter(function() {
					clearInterval( timer );

				}).mouseleave(function() {
					clearInterval( timer );
					timer = setInterval(function () {
						slide();
					}, options.transition_interval);
				});
			}

		}
	};
})(jQuery);

```