multihero.js (マルチヒーロー.js)

海外のウェブサイトで多く見られる「マルチヘッダー(MultiHeader)」「マルチヒーロー(MultiHero)」を実現するJavaScriptです。ページのキービジュアルやメインイメージに、複数のグラフィックを切り替えながら見せて、スペースをつぶさずにたくさんのコンテンツを配信します。(マルチヒーローについてはこちらの解説記事を参照→ユーザビリティやセンスの良さにグッときた8つのサイトデザイン

JavaScriptとCSSで構築しているので検索エンジンにインデックス化されやすく、どなたでも簡単にカスタマイズ+導入いただけます。

Demo

» Try demo without another.

Sample code

<head>

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="multihero.js"></script>
<script type="text/javascript">
// multihero.js Customize
multihero.interval = 5000;
multihero.speed = "slow";
</script>

※赤字箇所は必須箇所です。適宜パスを変更してお使いください。

<body>

<div id="multiHero">
<ul id="multiHeroContents">
<li><a href="#"><img src="images/377289851_72592c7db1.jpg" alt="1"></a></li>
<li><a href="#"><img src="images/2314662310_241beacdec.jpg" alt="2"></a></li>
<li><a href="#"><img src="images/2314659020_6b315af23b.jpg" alt="3"></a></li>
</ul>
<ul id="multiHeroControls">
<li><a href="javascript:multihero.show(1);">1</a></li>
<li><a href="javascript:multihero.show(2);">2</a></li>
<li><a href="javascript:multihero.show(3);">3</a></li>
<li class="next"><a href="javascript:multihero.next();">next</a></li>
<li class="back"><a href="javascript:multihero.back();">back</a></li>
</ul>
</div>

<ul id="multiHeroContents>の中のリストタグが切り替えの内容になります。
<ul id="multiHeroControls>が切り替えのコントロールボタン類です。
切り替えの内容は数が増えても問題ありません。
(ただし切り替えの内容の数と、コントロールボタンの数はあわせてください。)

Download

License & Support

※動作確認ブラウザ: IE6, Fx2/3, Opera9.5, Safari3

※個人利用/商用利用問わずご利用ください。連絡もリンクも特に要りません。
自由に持っていって、自由に改変してください。
どこかで紹介して頂けると嬉しいです。


back to home