仕事でメインビジュアルを自動で切り替えたいという要望があったのでプラグインを作成しました。
昔ならFlashでしか出来ないと思っていたことが、Javascriptで出来るのはSEO・メンテナンス性を考えても嬉しいことです！

• DEMO
• DOWNLOAD

ファイル構造

HTML

全てを包括するid=”mainVisual”の中に、大きい画像用のid=”autoVisual”とナビゲーションのid=”autoNav”でHTMLを構成します。
id=”mainVisual”は直接JSと関係が無いので、名称を変えてもOKです。

大きい画像にidとURLリンクを設定します。ナビゲーションには対象となる大きい画像のidをhrefに設定します。
JSがオンの場合はナビゲーションにも大きい画像のURLがリンクされます。
逆にJSがオフの場合にはページ内リンクになるので、クリックすると大きい画像が切替ります。

<div id="mainVisual">
	<div id="autoVisual">
		<p id="visual01"><a href="http://www.lfp.es"><img src="../img/main_lfp.jpg" /></a></p>
		<p id="visual02"><a href="http://www.premierleague.com"><img src="../img/main_premier.jpg" /></a></p>
		<p id="visual03"><a href="http://www.legaseriea.it"><img src="../img/main_serie_a.jpg" /></a></p>
		<p id="visual04"><a href="http://www.bundesliga.de"><img src="../img/main_bundes.jpg" /></a></p>
	</div>
	<ul id="autoNav">
		<li><a href="#visual01"><img src="../img/nav_lfp.jpg" /></a></li>
		<li><a href="#visual02"><img src="../img/nav_premier.jpg" /></a></li>
		<li><a href="#visual03"><img src="../img/nav_serie_a.jpg" /></a></li>
		<li><a href="#visual04"><img src="../img/nav_bundes.jpg" /></a></li>
	</ul>
</div>

CSS

HTMLさえしっかり構成されていれば、CSSで自由にレイアウト出来ます。
今回は上に大きな画像、下にナビゲーション画像を置くレイアウトにしています。

#mainVisual {
	margin: 0 auto;
	width: 800px;
}

#autoVisual {
	position: relative;
	width: 800px;
	height: 400px;
	overflow: hidden;
}

#autoNav {
	margin: 10px 0 0 -4px;
	height: 100px;
	list-style: none;
	overflow: hidden;
	zoom: 1;
}

#autoNav li {
	float: left;
	_display: inline;
	margin-left: 4px;
	width: 197px;
	height: 100%;
}

設置方法

jQueryとプラグインの読み込み

jQueryを先に読み込ませ、その後「autoVisualSwitch.js」のプラグインを読み込ませます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="../js/lib/autoVisualSwitch.js"></script>

プラグイン設定

メインビジュアルを切り替えるナビゲーションのid=”autoNav”にプラグインを設定

<script type="text/javascript">
$(function(){
	$("#autoNav").autoVisualSwitch();
});
</script>

その他の設定

ナビゲーションにホバーした時に切替る画像の早さと、自動で切替る時の早さを設定出来ます。

speedが切替る画像の早さです。animateなどのスピードを決める「slow」「normal」「fast」が使えます。
もちろん数値も使えます。
intervalは自動で切替るスピードの設定です。こちらは数値のみです。

$(function(){
	$("#autoNav").autoVisualSwitch({
		speed:"normal",
		interval:100
	});
});

最後に。。。

やっと更新出来ました！半年近く放置していたので、達成感があります。
二週間に一度は更新していきたいな～。

更新履歴

2011.07.07

読み込み直後、メインビジュアル一番下の要素が重なりの一番上に来ていたので、最初の要素にz-index:50を与えました。
「autoVisualSwitch.js」の14行目

1. Web-Parkのホーム > 
2. Javascript > 
3. 自動ビジュアル切替jQueryプラグイン – autoVisualSwitch.js()