自動ビジュアル切替jQueryプラグイン – autoVisualSwitch.js()

Javascript

2011.05.16

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

ファイル構造

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()
オススメ本(既読)
読んでみたい本(未読)

Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405

COMMENT!!

初めまして。
jQueryをダウンロードしようとしましたが、一部が文字化けしているようです。一度使ってみたいので、もしよければ直してもらえますでしょうか。
よろしくお願いします。

コメントありがとうございます!
文字コードはUTF-8で作成しているので、ソース表示画面でUTF-8に変更頂いて宜しいでしょうか?
例)FireFoxの場合
「表示」→「文字エンコーディング」→「Unicode(UTF-8)」
を選択してみて下さい。

お願いします!

貴サイトのjQueryプログラムの機能で大変有効的に使わせていただいています。
ひとつ質問なのですが、DEMOページで4枚切り替わるようになっていますが、
ページアクセスした直後に直接1枚目に表示される大きいナビ画面をクリックすると、4番目に設定しているリンクに飛んでしまいます。

本来1枚目のリンク先は「http://www.lfp.es/」に飛ぶと思いますが、「http://www.bundesliga.de/」に飛んでしまうということです。

これについてはバグなのでしょうか。
お手数ですが、ご教授いただければ幸いです。
よろしくお願い致します。

さくさん、ご報告頂き、ありがとうございます!
気付きませんでした。

読み込み直後はHTML内で一番下の要素の「BUNDES LIGA」が重なりの一番上になってました。
一番上の「LFP」に読み込み直後、z-index:50を与えて、解決いたしました!

はじめまして。
こちらのプラグインを利用させて頂く予定ですが、2つほど変更したい点があり質問させていただきたいと思います。
①ナビゲーション機能が不要の場合、気をつけることはありますでしょうか。
②10以上の画像をランダムに表示させたい場合、どのようにしたらいいでしょうか。
どうぞよろしくお願いいたします。

ご返信遅くなり、申し訳ございません。
質問頂いておりました件ですが、

(1)ナビゲーション機能が不要の場合、気をつけることはありますでしょうか。
< ul id=”autoNav”>の要素にプラグインを指定していますので、この要素を消さずに、display: noneで非表示にして下さい。
ナビゲーションを消す仕様は考えておりませんでしたので、不本意かもしれませんがナビゲーションのHTMLは残ってしまいます。

(2)10以上の画像をランダムに表示させたい場合、どのようにしたらいいでしょうか。
<div id=”autoVisual”>の子要素<p>と< ul id=”autoNav”>の子要素<li>を任意の数だけ増やして下さい。
その際、<p>要素のID名と<li>要素の子要素<a>のhref属性は同じにして下さい。
※ID名とhref属性は連番である必要はありません。
サンプルページ参照

一度お試し下さい。

COMMENT PLEASE!!

トラックバック

「自動ビジュアル切替jQueryプラグイン – autoVisualSwitch.js()」のトラックバックURL

Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
http://web-park.org/javascript/auto_visual_switch20110516.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook