jQuery で世界一簡単に画像を自動スライドすることができる jquery.simpleSlide.js

本当にスライドだけがしたい場合の jQuery のコードを書いてみました。ul と li で画像を並べるだけで、勝手にスライドが始まります。

基本的な使い方

HTML の書き方

以下のようにスライドしたい画像を並べます。
CSS は必要ありません、きっと jquery.simpleSlide.js が自動で設定してくれます。
id を slide にしておきますと、後々便利ですが、任意の名前でも結構です。

1
2
3
4
5
<ul id="slide">
	<li><img src="image_01.png"></li>
	<li><img src="image_02.png"></li>
	<li><img src="image_03.png"></li>
</ul>

JS の読み込み

simpleSlide() で起動します。 ページ末端に以下のようにコードを追加してください。
HTML の段階で、id 名に slide を設定した場合は simpleSlide() と空で OK です。

1
2
<script type='text/javascript' src='jquery.simpleSlide.js'></script> 
<script type='text/javascript'>simpleSlide();</script>

※これだけで動かない場合は以下を読み進めてください…。

堅実な使い方

以上の手順だけで動くには動きますが、全自動すぎて不具合が発生することがありますので、以下の項目を設定することをおすすめします。

ID 名を指定する

HTML の段階で任意の id 名をいれた場合は、第1引数にあなたが設定した id 名を入れます。

1
2
<script type='text/javascript' src='jquery.simpleSlide.js'></script> 
<script type='text/javascript'>simpleSlide('#hoge');</script>

速度の設定

ちなみにスライドする速度を変更できます。
第2引数にミリ秒でスライドとスライドの間隔を入れます。

1
2
<script type='text/javascript' src='jquery.simpleSlide.js'></script> 
<script type='text/javascript'>simpleSlide('#hoge', 3000);</script>

枠のサイズ設定

さらに細かい設定ですが、横幅と高さを設定することができます。
要はフレーム枠のサイズです。

1
2
<script type='text/javascript' src='jquery.simpleSlide.js'></script> 
<script type='text/javascript'>simpleSlide('#hoge', 3000, 500, 300);</script>

第3引数が width、第4引数は height を設定します。
ここを設定しなければ、jquery.simpleSlide.js が ul の初出の子要素のサイズを取得して、それを width と height として使用します。ですが、少し不調なので、挑戦者以外は設定してください。

ダウンロードはこちら: jquery.simpleSlide.js (v1.0)

コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
jQuery.noConflict();
var j$ = jQuery;
 
function simpleSlide(myid, animateInterval, width, height) {
 
	if(typeof(myid) == "undefined") var myid = '#slide';
	var mylist = myid + ' > li';
 
	if(typeof(width) == "undefined") var width = j$(mylist + ':first-child').width();
	if(typeof(height) == "undefined") var height = j$(mylist + ':first-child').height();
 
	if(typeof(animateInterval) == "undefined") var animateInterval = 5000;
	var animeteTime = animateInterval / 5;
 
	j$(myid)
		.css('display', 'block')
		.css('position', 'relative')
		.css('width', width + 'px')
		.css('height', height + 'px')
		.css('overflow', 'hidden');
 
	j$(mylist).each(function(num) { 
		j$(this)
			.css('display', 'block')
			.css('position', 'absolute')
			.css('top', '0px')
			.css('left', (width*num) + 'px');
	});
 
	setInterval("slide('" + myid + "','" + mylist + "'," + width + "," + height + "," + animateInterval + "," + animeteTime + ")", animateInterval);
}
 
function slide(myid, mylist, width, height, animateInterval, animeteTime) {
 
	j$(myid).append(j$(mylist + ':first-child').clone());
	j$(mylist + ':last-child').css('left',(width * (j$(mylist).length - 1)) + 'px');
 
	j$(mylist).each(function(num) { 
		if(j$(mylist).length - 1 == num) {
			j$(this).animate({ left: '-=' + width + 'px' }, animeteTime, null, function() {
				j$(mylist + ':first-child').remove();
			});
		} else {
			j$(this).animate({ left: '-=' + width + 'px' }, animeteTime);
		}
	});
 
}

コメント

コメントは受け付けていません。