一定時間がたつと画像が切り替えるスクリプトの第二弾。スクロールして画像が切り替わります。
今回はjQueryに加え、jquery.easingというプラグインを使用します。これはアニメーションの動きをイケてる動きに変えれるプラグインです。
縦バージョン
サンプルデモはこちらです。
ファイルのダウンロードはこちらから。
横バージョン
サンプルデモはこちらです。
ファイルのダウンロードはこちらから。
縦も横もほとんど中身は変わりませぬ。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="css/recet.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/layout.css" rel="stylesheet" type="text/css" media="all" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.easing.js" type="text/javascript"></script> <script src="js/loading.js" type="text/javascript"></script> </head> <body> <div> <ul id="gallery"> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> </ul> </div> </body> </html>
liの部分に画像を一つずつ設定してあげてくださいな。画像ファイルの名前は1とか2とか連番じゃなきゃダメよ。
#gallery{ width:600px; height:480px; } #gallery li{ line-height:0px; position: relative; left:0 }
//画像を切り替える速さ imgChangeSpeed = 2000; //画像の縦幅 imgHeight = 480; //画像の横幅 imgWidth = 600; //画像の数 imgInt = 3; //ページ変異のタイプ type = "easeInOutBack"; var move = "-" + imgHeight + "px"; var maximun = "-" + imgHeight * imgInt; $(function(){ //一定時間毎にスクリプトを呼び出す var t = setInterval(loadImg, imgChangeSpeed); //呼び出されるスクリプト function loadImg(){ var movement = $("li").css('top'); var movement = parseInt(movement.replace("px","")) - imgHeight; if(movement > maximun){ $("li").animate({'top':movement},{queue:false, duration:1000, easing: type}); } else{ $("li").animate({'top': 0}, 1000); } } });
画像の縦幅と横幅と切り替える画像の数を指定してあげてね☆
ちなみに、//ページ変異のタイプのところをjQuery日本語リファレンスのこちらのページの黄色の棒の上に書いてあるそれぞれの名前に変えてあげると、スクロールの動きが変わりまっせ。
これでFlash使わなくてイイネ!今回のサンプルではバカでかい画像使ってるけれど、これを横長の画像にしてサイトのメイン画像部分に入れちゃえば、いい感じになるんじゃなーい?キャンペーンの画像切り替えたりしてさー!
では。
コメント