スライドが自動的に切り替わるようにする
ユーザーがボタンをクリックして次のスライドに切り替わるようにするだけでなく、一定時間ごとに次のスライドに切り替わるようにすることもできます。これは以下のようにnext()メソッドをsetInterval()で定期的に呼び出すようにします。
setInterval('gliderObj1.next()', 3000);
ここで指定している3000は3000ミリ秒なので3秒ごとに次のスライドに切り替わるようになります(サンプル07)。
 |
 |
サンプル07の実行結果。 |
|
 |
一定時間ごとに自動的にスライドが切り替わる |
サンプル07を実行すると最後のスライドが表示された後に、いきなり最初のスライドに戻って繰り返し表示してしまいます。繰り返し表示したい場合には良いのですが、最後まで表示したら以後切り替わらない方が良いこともあります。この場合には表示されているスライド番号を変数に保持しておき、最大スライド数以下の場合だけ処理を実行するようにします(サンプル08)。最大スライド番号は変数maxPageで保持していますので、必要に応じて以下の行の値を最大スライド数に書き換えてください。
maxPage = 3;
Gliderはコンパクトで手軽なスライド表示ライブラリですから、様々なシーンに応用できるでしょう。
サンプル07
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Gliderサンプル</title>
<link rel="stylesheet" href="css/glider.css" type="text/css">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/glider.js"></script>
<script type="text/javascript" charset="utf-8"><!--
window.onload = function(){
gliderObj1 = new Glider("glider1");
setInterval('gliderObj1.next()', 3000);
}
// --></script>
</head>
<body>
<h1>Gliderサンプル</h1>
<div id="glider1">
<div class="scroller">
<div class="content">
<div class="section" id="page01">
■ページ 1<br>
<p>最初のページです</p>
</div>
<div class="section" id="page02">
■ページ 2<br>
<p>二番目のページです<br>
<img src="photo/001.jpg" width="384" height="216">
</p>
</div>
<div class="section" id="page03">
■ページ 3<br>
<p>三番目のページです<br>
特にコメントはありません...
</p>
</div>
<div class="section" id="page04">
■ページ 4<br>
<p>四番目のページです<br>
<img src="photo/002.jpg" width="384" height="216">
</p>
</div>
</div>
</div>
</div>
</body>
</html>
サンプル08
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Gliderサンプル</title>
<link rel="stylesheet" href="css/glider.css" type="text/css">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/glider.js"></script>
<script type="text/javascript" charset="utf-8"><!--
window.onload = function(){
currentPage = 0;
maxPage = 3;
gliderObj1 = new Glider("glider1");
setInterval('(function(){ currentPage++; if (currentPage < maxPage) gliderObj1.next();})()', 3000);
}
// --></script>
</head>
<body>
<h1>Gliderサンプル</h1>
<div id="glider1">
<div class="scroller">
<div class="content">
<div class="section" id="page01">
■ページ 1<br>
<p>最初のページです</p>
</div>
<div class="section" id="page02">
■ページ 2<br>
<p>二番目のページです<br>
<img src="photo/001.jpg" width="384" height="216">
</p>
</div>
<div class="section" id="page03">
■ページ 3<br>
<p>三番目のページです<br>
特にコメントはありません...
</p>
</div>
<div class="section" id="page04">
■ページ 4<br>
<p>四番目のページです<br>
<img src="photo/002.jpg" width="384" height="216">
</p>
</div>
</div>
</div>
</div>
</body>
</html>
