Glider.jsは、prototype.jsのライブラリを使用していて、コンテンツの内容別にstyleをしたり、flashコンテンツや動画を載せたり、インラインフレームを使用できたりと、便利です。
では、どうぞ。]]> /* Glider.jsの準備 */
こちら、glider.js exampleの下の方にあるDownloadから、ファイル一式ダウンロードできます。これで準備は完了です。むしろ、全て出来上がってるので、ダウンロードできたら、ここから下は見る必要がないです・・・！。
/* Glider.jsの設置 */
まず、フォルダの構成は、
index.html
css
- glider.css
js
- effects.js
- glider.js
- prototype.js
img
- img01.gif
となっています。
次に<head>～</head>部分に、
<link rel="stylesheet" href="css/glider.css" type="text/css" media="screen" charset="utf-8">
<script src="js/prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="js/effects.js" type="text/javascript" charset="utf-8"></script>
<script src="js/glider.js" type="text/javascript" charset="utf-8"></script>
を書きます。
そして、<body>タグ内に、
<div id="my-glider">
<div class="controls">
<a href="#section1">Section 1</a> |
<a href="#section2">Section 2</a> |
<a href="#section3">Section 3</a> |
<a href="#section4">Section 4</a> |
</div>
<div class="scroller">
<div class="content">
<!-- Section 1start-->
<div class="section" id="section1">
Section1
<p>ここが初めに表示される部分です。</p>
<p><a href="#"> 画像</a><br /><img src="img/img01.gif"></p>
</div>
<!-- Section 1end-->
<!-- Section 2start-->
<div class="section" id="section2">
Section 2
<p>google adsenceを表示。</p>
<script type="text/javascript"><!--
google_ad_client = "#";
/* 468x60, 作成済み 08/02/15 */
google_ad_slot = "6121524106";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="#">
</script>
</div>
<!-- Section 2end-->
<!-- Section 3start-->
<div class="section" id="section3">
Section 3
<p>インラインフレームも大丈夫。</p>
<p>Steruss / 円鋭 曲目</p>
<iframe src=http://xxxx.com style="overflow:hidden"></iframe>
</div>
<!-- Section 3end-->
<!-- Section 4start-->
<div class="section" id="section4">
Section 4
<p>動画も大丈夫。</p>
<p>youtubeの場合です。</p>
<object width="275" height="205"><param name="movie" value="
</div>
<!-- Section 4end-->
</div>
</div>
</div>
<a href="#" onclick="my_glider.previous();return false;">Previous</a> | <a href="#" onclick="my_glider.next();return false">Next</a>
<script type="text/javascript" charset="utf-8">
var my_glider = new Glider('my-glider', {duration:0.5});
</script>
と書きます。<!-- sectionx start -->~<!-- sectionx end>を、class="scroller"の中で繰り返し書いていけば、順々にスライドするコンテンツも増えていきます。
これで完成です。
/* 参考サイト */
]]>
