Slideloop

走馬灯のように画像をスライド表示するjQueryプラグインを作成しました。

名称
jquery.slideloop.js < Download : slideloop.zip >
動作確認ブラウザ
Windows : IE 9 , Firefox 5.0.1 , Google Chrome 12.0.742.122 , Safari 5.1 , Opera 11.5 , IE(IETester) 6 / 7 / 8
Mac : Safari 5.1 , Firefox 5.0.1 , Google Chrome 12.0.742.122 , Opera 11.5
Other : Android2.1 , iPhone , iPad
特徴
jQuery1.6.2 で動作します。
画像を囲んだタグにクラスをつけるだけで、写真が自動的にスライドします。
オプションで鏡面効果をつけることができます。
鏡面効果には、鏡面の比率維持、鏡面の高さ、透明度(始点・終点)を指定できます。
※ Android 2.0、2.1では、HTML5のCanvas要素にバグがあるため、鏡面効果が無効になります
ライセンス
GPL and MIT License

スライド(デモ)

Public Domain Picturesの画像を使用しています。

下記の値を変更して効果を確認することができます

カスタムコード

	var opt = {
		speed: 30000,
		fx: true,
		aspect: true,
		h: 0.35,
		opa1: 0.3,
		opa2: 1
		};
	$(".slide").slideloop(opt);
	

カスタムコードの使用方法についてはオプションを参照してください。

その他のデモ

fancyboxと併用することもできます。

下の画像をクリックするとfancyboxによって、大きな画像が表示されます。

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.slideloop.js"></script>
	<link rel="stylesheet" href="js/slideloop.css" />
	<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
		<link rel="stylesheet" href="fancybox/jquery.fancybox.css" />
		<script >
		jQuery(function($){
		$('.slide').find('a').fancybox().end().slideloop();
		});
		</script>
	</head>
	  :
	  :
	<div class="gallery">
	    <a href="parts/image01.jpg"><img src="parts/s_image01.jpg" alt="" /></a>
	    <a href="parts/image02.jpg"><img src="parts/s_image02.jpg" alt="" /></a>
	    <a href="parts/image03.jpg"><img src="parts/s_image03.jpg" alt="" /></a>
	</div>
	

基本的な設置方法

  1. ここからzipファイルをダウンロードします
  2. ダウンロードしたファイルを解凍し、「jquery.slideloop.js」、「slideloop.css」を「js」フォルダにコピーします。
  3. コピーしたファイルを読み込むように、HTMLファイルのhead要素内に以下の記述を追加します。
    	<html>
    	    :
    	    :
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    		<script type="text/javascript" src="js/jquery.slideloop.js"></script>
    		<link rel="stylesheet" href="js/slideloop.css" />
    		<script >
    		jQuery(function($){
    		$('.slide').slideloop();
    		});
    		</script>
    	</head>
  4. スライドさせる画像をDIV要素で囲み、そのDIV要素に「slide」というクラス名を付けます
    	<div class="slide">
    		<img src="parts/image01.jpg" alt="" />
    		<img src="parts/image02.jpg" alt="" />
    		<img src="parts/image03.jpg" alt="" />
    	</div>
    	
  5. 以上で画像がスライドして表示されます。

オプション

オプションの値を指定して、スライドの速さや鏡面効果の有無、透明度を変更できます。

上記デモのテキストボックスに入力することで、表示を確認できます

  1. 「デモ」の入力ボックスの値を変更します。
  2. 入力後、「カスタムコード」の部分をコピーします。
  3. head要素内を以下のようにコピーしたカスタムコードに置き換え、保存します。

    変更前

    	<script >
    	jQuery(function($){
    	    $('.slide').slideloop();
    	});
    	</script>
    	

    変更後

    	<script >
    	jQuery(function($){
    	    var opt = {
    		    speed: 30000,
    		    fx: true,
    		    aspect: true,
    		    h: 0.35,
    		    opa1: 0.3,
    		    opa2: 1
    		    };
    		    $(".slide").slideloop(opt);
    	});
    	</script>
    	
  4. ブラウザで表示すると、変更したオプションでスライドが表示されます。

オプションの詳細

speed:
画像1枚あたりの表示時間(ex:10000)(ミリ秒)
fx:
鏡面効果の有無(true ,false)
aspect:
鏡面の画像の縦横比を維持するかどうか(true ,false)
falseの場合、鏡面の高さに縮尺して表示します
h:
鏡面の高さ(倍率)
opa1:
鏡面部始点の透明度(0~1)
opa2:
鏡面部終点の透明度(0~1)

更新履歴

1.0.0
公開

ページトップに戻る