かなり自由に画像を並べてクリックで左右にスライドできる jquery.clickSlide.js

とても自由度の高い配置で画像を並べてクリックで左右にスライドさせられる jquery.clickSlide.js を作りましたので公開します。

使い方

用意するものは以下3点です。

  • リストで画像を用意する
  • クリックすると左にスライドさせるための部品
  • クリックすると右にスライドさせるための部品

ここでは部品を span タグで用意させて頂きましたが、部品に関しては区別するための id さえ付加されていればどの要素でも構いません。今回は左を clickSlide_left、右を clickSlide_right とさせて頂きました。また、画像が含まれている ul には後で識別するための id を付加しておいてください。

1
2
3
4
5
6
7
8
9
<span id="clickSlide_left">[←]</span> 
<span id="clickSlide_right">[→]</span> 
<ul id="clickSlide"> 
	<li><img src="sample_01.jpg" width="500" /></li> 
	<li><img src="sample_02.jpg" width="500" /></li> 
	<li><img src="sample_03.jpg" width="500" /></li> 
	<li><img src="sample_04.jpg" width="500" /></li> 
	<li><img src="sample_05.jpg" width="500" /></li> 
</ul>

ここでは span の中身をテキストで用意していますが、実際に使う場合は画像などを入れて使うことになるかと思います。

JS を読み込む

jquery.clickSlide.js を起動するために以下のコードをページに書きます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript" src="jquery.clickSlide.js"></script>
<script type='text/javascript'>
	clickSlide({
		frameId: '#clickSlide',
		leftButtonId: '#clickSlide_left',
		rightButtonId: '#clickSlide_right',
		frameWidth: 620,
		frameHeight: 100,
		imageWidth: 100,
		imageHeight: 100,
		imageMargin: 10,
		animeteTime: 500
	});
</script>

それぞれの値の説明をさせて頂きます。

frameId

画像が含まれている ul 要素に設定されている id を#付きで指定します。

leftButtonId

クリックすると左にスライドするための部品に設定している id を#付きで指定します。

rightButtonId

クリックすると右にスライドするための部品に設定している id を#付きで指定します。

frameWidth

画像のスライドが流れる部分の横幅です。この横幅より画像が多い場合は見えなくなります。

frameHeight

画像のスライドが流れる部分の縦幅です。この縦幅より画像が多い場合は見えなくなります。

imageWidth

含まれている画像の横幅を指定します。

imageHeight

含まれている画像の縦幅を指定します。

imageMargin

含まれている画像の左右の margin を設定します。

animeteTime

画像のスライドにかかる時間をミリ秒で指定します。ここでは500となっていますので、0.5秒でスライドが完了します。

コード

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
jQuery.noConflict();
var j$ = jQuery;
 
function clickSlide(cs)
{
	var clickFremeList = cs.frameId + ' > li';
 
	j$(cs.frameId)
		.css('display', 'block')
		.css('position', 'relative')
		.css('width', cs.frameWidth + 'px')
		.css('height', cs.frameHeight + 'px')
		.css('overflow', 'hidden');
 
	j$(clickFremeList).each(function(num)
	{ 
		j$(this)
			.css('display', 'block')
			.css('position', 'absolute')
			.css('top', '0px')
			.css('left', ((cs.imageWidth + (cs.imageMargin * 2)) * num) + 'px')
			.css('margin', '0px ' + cs.imageMargin + 'px');
	});
 
	j$(clickFremeList + ' > img')
			.css('width', cs.imageWidth + 'px')
			.css('height', cs.imageHeight + 'px');
 
	j$(cs.rightButtonId).bind("click", {direction:'right'}, clickSlideButton);
	j$(cs.leftButtonId).bind("click", {direction:'left'}, clickSlideButton);
 
	function clickSlideButton(bt)
	{
		j$(this).unbind('click');
 
		if(bt.data.direction == 'right') {
			var pseudElements = ':first-child';
			var anotherPseudElements = ':last-child';
			var moveWidth = cs.imageWidth + (cs.imageMargin * 2);
			var ButtonId = cs.rightButtonId;
			j$(cs.frameId).append(j$(clickFremeList + pseudElements).clone());
			j$(clickFremeList + anotherPseudElements).css('left',(moveWidth * (j$(clickFremeList).length - 1)) + 'px');
		} else if(bt.data.direction == 'left') {
			var pseudElements = ':last-child';
			var anotherPseudElements = ':first-child';
			var moveWidth = '-' + (cs.imageWidth + (cs.imageMargin * 2));
			var ButtonId = cs.leftButtonId;
			j$(cs.frameId).prepend(j$(clickFremeList + pseudElements).clone());
			j$(clickFremeList + anotherPseudElements).css('left', moveWidth + 'px');
		}
 
		j$(clickFremeList).each(function(num) { 
			if(j$(clickFremeList).length - 1 == num) {
				j$(this).animate({ left: '-=' + moveWidth + 'px' }, cs.animeteTime, null, function() {
					j$(clickFremeList + pseudElements).remove();
					j$(ButtonId).bind("click", {direction:bt.data.direction}, clickSlideButton);
				});
			} else {
				j$(this).animate({ left: '-=' + moveWidth + 'px' }, cs.animeteTime);
			}
		});
	}
}

参考サイト

コメント

  1. nakamuraさんのコメント

    はじめまして。HTMLというものを知ってから3ヶ月あまり、キレイで簡単に画像を表示できるスライド方法がないか探していたのですが「かなり自由に画像を並べてクリックで左右にスライドできる jquery.clickSlide.js」を使用させていただき、大変助かりました。
    恥を承知でご質問させていただきたいのですが、画像を切り替える←や→の上にマウスポインタを合わせたときにカーソルを変える事は出来るのでしょうか。リンクの上にカーソルを合わせると手のポインタになるように、矢印の上でも変更させたいのです。ドリームウィーバーのCSSで出来ていた事なのですが、の変更のさせ方がわかりません。お時間ある時に是非ご教授いただきたいです。よろしくお願いします。

  2. nakamuraさんのコメント

    初歩的な質問なのにありがとうございました。おかげさまで思い通りにできました。

  3. izumiman blog » [jQuery]最近試してみたプラグインさんのコメント

    [...] 自由度の高さではこちらもオススメです。 かなり自由に画像を並べてクリックで左右にスライドできる jquery.clickSlide.js [...]