jQueryでローテーションバナーを実装

jQuery2011年12月14日

少し前はローテーションバナーはFlashで作成する場合が多かったと思いますが、最近ではJavascriptで制作する案件も増えてきています。

今回は、jQueryを使用してローテーションバナーを実装してみましたので、どうぞご参考にしてみてください。

仕様

最大個数に規定はなし
自動スクロールはなし
リピート機能はなし
左右に移動ボタンを配置
一番右に移動した際、右ボタンをグレーアウト
一番左に移動した際、左ボタンをグレーアウト
バナーが3個以下の場合、左右の移動ボタンは非表示

HTML

<div class="rotate-banner">
<p id="btn-left"><img src="images/btn-left.gif" alt="前にスライド" width="13" height="60" /></p>
<div>
<ul>
<li><a href="#"><img src="images/bnr-01.gif" alt="" width="200" height="60" /></a></li>
<li><a href="#"><img src="images/bnr-02.gif" alt="" width="200" height="60" /></a></li>
<li><a href="#"><img src="images/bnr-03.gif" alt="" width="200" height="60" /></a></li>
<li><a href="#"><img src="images/bnr-04.gif" alt="" width="200" height="60" /></a></li>
<li><a href="#"><img src="images/bnr-05.gif" alt="" width="200" height="60" /></a></li>
<li><a href="#"><img src="images/bnr-06.gif" alt="" width="200" height="60" /></a></li>
</ul>
</div>
<p id="btn-right"><img src="images/btn-right.gif" alt="次にスライド" width="13" height="60" /></p>
</div>

CSS

@charset "utf-8";

/* ----------------------------------------------------------------
Default
----------------------------------------------------------------- */

*{margin:0;padding:0;}
body{padding:30px; text-align:center;font-size:100.01%;}
body img{ border:none; outline:none;}

ul{
margin:0;
padding:0;
list-style:none;
}


/* ----------------------------------------------------------------
rotate-banner
----------------------------------------------------------------- */

div.rotate-banner{
width:658px;
position:relative;
}

div.rotate-banner div{
width:624px;
overflow:hidden;
height:60px;
position:relative;
left:0;
_left:-8px;
}

div.rotate-banner div ul{
height:60px;
overflow:hidden;
position:absolute;
left:0;
}

div.rotate-banner div ul li{
width:200px;
float:left;
margin:0 8px 0 0;
}

p#btn-left{
width:13px;
margin-right:8px;
float:left;
display:inline;
}

p#btn-right{
width:13px;
position:absolute;
top:0;
right:0;
}

div.rotate-banner:after,
div.rotate-banner div:after,
div.rotate-banner div ul:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
font-size:0;
}

Javascript

'jQuery' in window && (function($) {
$(function(){
init();
});

var EASING_TYPE = "easeOutSine";
var DURATION = 400;

//internal
var currentNum = 0;
var preNum = 0;
var minNum,maxNum;
var itemLength,totalWidth;
var originSrcL,originSrcR;
var $left,$right,$container,$body;

function init(){
//setItemInfo
itemLength = $(".rotate-banner li img").length;
totalWidth = itemLength*(200+8);
minNum = -(itemLength-3);
maxNum = 0;

//setStyle
$body = $(".rotate-banner ul").css("width",totalWidth+"px");
$left = $("#btn-left");
$right = $("#btn-right");
if(itemLength <= 3){
$left.hide();
$right.hide();
return;
}	

//setImageSrc
originSrcL = $left.find("img").attr("src").replace(/\.gif/,"");
originSrcR = $right.find("img").attr("src").replace(/\.gif/,"");

//preloadArrow
$(new Image()).attr("src",originSrcL+"_u.gif").attr("src",originSrcL+"_o.gif").attr("src",originSrcR+"_u.gif").attr("src",originSrcR+"_o.gif");

//activateArrow
deactivate($left);
activate($right);
}

function arrowClickHandler(e){
e.preventDefault();
update($(e.currentTarget));
}

function arrowOverHandler(e){
var tgt = e.currentTarget.getElementsByTagName("img")[0];
tgt.src = tgt.src.replace(/(.*)\.gif/,"$1_o.gif");
}		

function arrowOutHandler(e){
var tgt = e.currentTarget.getElementsByTagName("img")[0];
tgt.src = tgt.src.replace(/(.*)_o\.gif/,"$1.gif");
}		

function update($tgt){
var name = $tgt.attr("id");

if(name =="btn-right"){
currentNum--;
if(currentNum < minNum){
currentNum = minNum;
}
}else{
currentNum++;
if(currentNum > 0){
currentNum = 0;
}
}
if(preNum == currentNum) return;

if(currentNum == 0 && preNum == -1){
deactivate($left);
}else if(currentNum == -1 && preNum == 0){
activate($left);
}
if(currentNum == minNum && preNum == minNum+1){
deactivate($right);
}else if(currentNum == minNum+1 && preNum == minNum){
activate($right);
}

var dest = currentNum*208;
$body.stop().animate({left:dest+"px"},{duration:DURATION,easing:EASING_TYPE});
preNum = currentNum;
}

function activate($tgt){
if($tgt.attr("id") == "btn-right"){
$tgt.find("img").attr("src",originSrcR+".gif");
$tgt.children("img").wrap('');
}else{
$tgt.find("img").attr("src",originSrcL+".gif");
$tgt.children("img").wrap('');
}
$tgt.bind("click",arrowClickHandler).bind("mouseover",arrowOverHandler).bind("mouseout",arrowOutHandler);
}

function deactivate($tgt){
if($tgt.attr("id") == "btn-right"){
$tgt.find("img").attr("src",originSrcR+"_u.gif");
}else{
$tgt.find("img").attr("src",originSrcL+"_u.gif");
}
$tgt.children("a").replaceWith($tgt.find("img"));
$tgt.unbind("click",arrowClickHandler).unbind("mouseover",arrowOverHandler).unbind("mouseout",arrowOutHandler);
}

})(jQuery);

解説

イージングを実現するため、jQueryのプラグインである、jQuery Easingを使用しています。

実行ファイルのrotate.jsの6,7行目でイージングタイプおよびスピードをカスタマイズすることが可能です。これによってサイトの雰囲気にあわせたイージングを設定することが可能です。

また、左右の移動ボタンについて、ロールオーバーおよびグレーアウトの画像のパスが設定されています。ロールオーバーは_o.gif、グレーアウトは_u.gifとなりますが、これらのパスも記述を変えることで自由に設定が可能です。

この記事を読んでいる方にオススメの記事

「jQuery」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。