jQueryで『クロスフェードビュアー作ってやんよ!!!』
今さら感がハンパないが、jQueryで画像の枚数や表示速度等が簡単に操作できるビュアーが欲しかったので作成
1.HTMLの記述
<div id="viewer">
<img src="01.jpg" alt="" width="500" height="200" />
<img src="02.jpg" alt="" width="500" height="200" />
<img src="03.jpg" alt="" width="500" height="200" />
</div>
ID"viewer"内に画像を置く。
2.CSSの記述
#viewer {
margin: 0 auto;
width: 100%;
text-align: left;
overflow: hidden;
position: relative;
}
#viewer img {
top: 0;
left: 0;
width: 100%;
position: absolute;
}
ID"viwer"の領域を指定したい場合は幅と高さに任意の値を指定すれば良い。
3.jsの記述
$(function(){
var setImg = '#viewer';
var fadeSpeed = 1500; /* フェード速度 */
var switchDelay = 2000; /* 切り替え速度 */
var imgHeight = $(setImg + ' img').height();
$(setImg).css({height:(imgHeight)});
$(window).bind('load resize',function(){
var imgHeight = $(setImg + ' img').height();
$(setImg).css({height:(imgHeight)});
})
$(setImg).children(' img').css({opacity:'0'});
$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);
setInterval(function(){
$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
},switchDelay);
});
変数
fadeSpeedは画像が切り替わる際のフェード速度。
変数
switchDelayは次の画像に切り替わるまでの速度。
各数値を"
アナタらしい"数字に設定していけば良い…。
で、
こうなる。