Glider.jsを作ってみた。
今回も、ページ内でコンテンツがスライドする系、Glider.jsを作ってみました。
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"の中で繰り返し書いていけば、順々にスライドするコンテンツも増えていきます。
これで完成です。
/* 参考サイト */
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)