[JS]各パネルのリンクに対応した、シンプルなコンテンツスライダーのスクリプト -hash slider

サイト構築 -JavaScript

Post on:2010年11月17日

hash sliderの主な特徴

設置が簡単。
スタイルシートで簡単にデザインのカスタマイズが可能。
マウスホイールでスライド操作が可能。
#のリンクで各パネルの個別リンクにも対応。
番号のナビゲーションは自動で生成。
個人でも商用でも完全に無料。
2.2KBと超軽量サイズ。

[ad#ad-2]

hash sliderの実装

実装は簡単です。

HTML

各パネルは、リスト要素で実装します。

<div id="slider">
<ul>
<li>パネル1</li>
<li>パネル2</li>
</ul>
</div>

<div id="left"> 左へスライド </div>
<div id="right"> 右へスライド</div>

<ul id="numbers">
<li></li>
</ul>

L.3, 4のli要素はパネルの枚数に伴い増やしてください。
ナビゲーションはL.8, 9の左右へスライド、L.11-12の番号のナビゲーションの二つが設置可能です。番号のナビゲーションは自動で生成されます。

JavaScript

hash sliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/hashslider_minified.js"></script>

jsファイルを外部ファイルとして記述するだけです。
HTMLで使用する各id名を変更する場合は、スクリプト内のそれぞれの箇所を変更します。

あとは、CSSで自由にデザインを行います。