プラグインなしjQueryのみでリスト<li>を自動スライド

公開日：2014/10/17 最終更新日：2022/08/27

jQuery webパーツサンプルソース

ネットショップ運営の気になる備忘録

表TABLEの行TRやセルTDをjQueryのみでフェードさせて動かす簡単な実装方法

では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>が５つあるリストです。<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秒ごとに、リストの先頭に最後のリストを移動するという処理が記述しています。