プラグインなしjQueryのみでリスト<li>を動かしてみよう

公開日:  最終更新日:2015/12/10

プラグインなしjQueryのみでリスト<li>を定期的に動かす簡単な実装方法
ページを作成する際に、バナーを並べたり、商品情報(画像、品名、価格)並べてレイアウトする際にはリストタグを使ってレイアウトすることが多いのではないでしょうか。

そんなリストに動きを付けたいというニーズは結構あるのではと思います。
jQueryのプラグインを探せば、色々と見つかりますが実装するのが複雑で必要なファイルを複数容易する必要があったり、少し複雑な記述が必要になります。

たしかに、プラグインを利用すればオプション等を細かく設定が可能で出来る事は増えますが実装するのに少し手間がかかります。

あまり複雑な設定などは不要でとりあえず動かしたいという場合に使えるjQuery本体のみで簡単に実装する方法を紹介します。

スポンサードリンク

プラグインを使わずjQueryのみでリスト<li>を動かす方法

以前の記事


では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>&lt;img src="画像URL"&gt;</li>
<li>&lt;img src="画像URL"&gt;</li>
<li>&lt;img src="画像URL"&gt;</li>
<li>&lt;img src="画像URL"&gt;</li>
<li>&lt;img src="画像URL"&gt;</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>で高さ幅を小さめに指定して埋め込んで利用すれば省スペースな場所に設置することも出来ます。ぜひ、活用してみてください。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑