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" type="text/css" href="js/slideloop.css" />
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.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>

基本的な設置方法

ここからzipファイルをダウンロードします
ダウンロードしたファイルを解凍し、「jquery.slideloop.js」、「slideloop.css」を「js」フォルダにコピーします。

コピーしたファイルを読み込むように、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" type="text/css" href="js/slideloop.css" />
<script >
jQuery(function($){
    $('.slide').slideloop();
});
</script>
</head>

スライドさせる画像を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>

以上で画像がスライドして表示されます。

オプション

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

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

「デモ」の入力ボックスの値を変更します。
入力後、「カスタムコード」の部分をコピーします。

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>

ブラウザで表示すると、変更したオプションでスライドが表示されます。

オプションの詳細

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

更新履歴

1.0.0: 公開; (2011-8-8)

2011-8-8