ではTABLE(表)の行(TR)やセル(TD)を簡単に動かす方法について紹介しました。
以前紹介した方法と同じ方法を使えばリストを動かすことが可能です。
実際にページ作成する際には、TABLEタグよりもリストタグを使うことの方が多いのではないでしょうか。
リストタグとはこんな感じのタグです。
<ul>
<li>abcd</li>
<li>abcd</li>
<li>abcd</li>
</ul>
本日紹介する方法はjqueryのファイル読み込みと数行記述を追加するだけで実装が出来る内容ですので比較的簡単に導入が可能です。別途プラグインのファイルをダウンロードする必要はありません。
さて、まずは
http://jquery.com/よりjquery.min.jsをダウンロードしてください。
リスト(li)を数秒ごとに動かすサンプルソース
サンプルソース sample1.html
<script src="jquery.min.js" type="text/javascript"></script> <style type='text/css'> ul{ list-style:none; } li{ margin:10px; } </style> <ul class="mylist"> <li><img src="画像URL"></li> <li><img src="画像URL"></li> <li><img src="画像URL"></li> <li><img src="画像URL"></li> <li><img src="画像URL"></li> </ul> <script type="text/javascript"> timer = setInterval(function(){ $('ul.mylist li:last').prependTo('ul.mylist').hide().fadeIn(2000); }, 5000); </script>
1行目でjqueryのファイルを読み込んでいます。
2~9行目でCSSを記述しています。
10行目から16行目タグの記述部分は<li></li>が5つあるリストです。<li></li>の内側には画像のみにしていますが、画像、文字、リンクなど自由に記述してください。
1点だけjavascriptを記述する部分と揃える必要があるのが class=”mylist” とクラス名を指定しているところです。
19行目 timer = setInterval(function(){ は気にせずこのまま使いましょう。
20行目
$(‘ul.mylist li:last’).prependTo(‘ul.mylist’).hide().fadeIn(2000);
これを簡単に説明すると、リストの先頭に最後の<li></li>を移動しています。
.hide().fadeIn(2000);の部分は2秒間かけてフェードインしながら表示する。
この行が定期的(指定秒数ごと)に実行されます。
21行目では、何秒おきに動かすかを指定しています。5000は5秒になります。
という感じで5秒ごとに、リストの先頭に最後のリストを移動するという処理が記述しています。
リスト<li>を定期的に移動するサンプル
活用事例 バナー(画像)を並べて動かす
さきほどのサンプルのCSS部分にfloat:left;を追加して横に並べて幅を超えたら折り返して表示しています。
li{ margin:10px; float:left; }
活用事例 商品情報を並べて動かす
商品名、リンク、価格などを追加して商品情報を陳列しても良いかもしれません。
活用事例 お知らせを動かしてみる
お知らせ情報エリアに使うことも可能ですね。
別htmlファイルとして作成して、<IFRAME>で高さ幅を小さめに指定して埋め込んで利用すれば省スペースな場所に設置することも出来ます。ぜひ、活用してみてください。
Your Message