WordpressのUltimate Google Analyticsでログが取れない場合の解決方法
picxpic
PICxPIC
【Javascript】jQueryをつかった一定時間で画像を切り替えるスクリプト（スクロール）
picxpic
一定時間がたつと画像が切り替えるスクリプトの第二弾。スクロールして画像が切り替わります。
今回はjQueryに加え、jquery.easingというプラグインを使用します。これはアニメーションの動きをイケてる動きに変えれるプラグインです。
縦バージョン
サンプルデモはこちらです。
ファイルのダウンロードはこちらから。
横バージョン
サンプルデモはこちらです。
ファイルのダウンロードはこちらから。
縦も横もほとんど中身は変わりませぬ。
[html]
<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>
[/html]
liの部分に画像を一つずつ設定してあげてくださいな。画像ファイルの名前は1とか2とか連番じゃなきゃダメよ。
[css]
#gallery{
width:600px;
height:480px;
}
#gallery li{
line-height:0px;
position: relative;
left:0
}
[/css]
[js]
//画像を切り替える速さ
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);
}
}
});
[/js]
画像の縦幅と横幅と切り替える画像の数を指定してあげてね☆
ちなみに、//ページ変異のタイプのところをjQuery日本語リファレンスのこちらのページの黄色の棒の上に書いてあるそれぞれの名前に変えてあげると、スクロールの動きが変わりまっせ。
これでFlash使わなくてイイネ！今回のサンプルではバカでかい画像使ってるけれど、これを横長の画像にしてサイトのメイン画像部分に入れちゃえば、いい感じになるんじゃなーい？キャンペーンの画像切り替えたりしてさー！
では。