[jq-tiles]はタイル状のエフェクトが選べるjQueryプラグインです。
まず[jq-tiles]からjQueryプラグイン等をダウンロードします。
cssを<head>内に設定します。
</body>の直前にJavaScriptを設定します。
そして<body>内にコードを記述します。
オプション
$(function(){
$('.slider').tilesSlider({
x : 4, //ｘ軸のタイルの数 ２０個まで
y : 4, //y軸のタイルの数 ２０個まで
effect : 'default',//※エフェクトの種類
fade : false,// スライダーの切り替えをスライドではなくフェイドインにするか。
random : false,// trueにすると決まった順にエフェクトされます。
reverse : false,
backReverse : false,
rewind : false,
auto : false,
loop : false,
slideSpeed : 3500, //スライドのスピード
tileSpeed : 800, // 全てのタイルが消えるまでのスピード
cssSpeed : 300, // css3 transitionのスピード [100,200,300,400,500,600,700,800,900,1000],
nav : true, //ナビゲーションを追加するか。
navWrap : null,
bullets : true,
thumbs : true,
thumbSize : 25,
timer : true // タイムバーを表示するかどうか
});
});
HTML
<head>
<link rel="stylesheet" href="jquery.tiles.min.css"/>
</head>
<body>
<div class="slider">
<img src="img1.jpg"/><！-説明なし->
<img src="img2.jpg"/><p>説明画像2</p>
<img src="img3.jpg"/><p>説明画像3</p>
</div >
</body>
CSS
.slider{
width：1000px;
height:400px;
}
jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.tiles.min.js"></script>
<script type="text/javascript">
$(function(){
$('.slider').tilesSlider({ random: true })
</script>
エフェクト
default
simple
left
up
leftright
updown
switchlr
switchud
fliplr
flipud
reduce
360
スライダーエフェクトの動きは下記デモページから確認してください。
