//테마, 실루엣 (생성자 함수)
function BnrModule(bnr_id, roll_mode, roll_speed, grp_num ){

var _root = this;

this.obj = document.getElementById(bnr_id);
this.aTag = $(this.obj).find("ol>li>a");;
this.bnr = $(this.obj).find("ul>li>a");
this.bnrW = parseInt( $(this.obj).find("ul>li").css("width"),10);
this.bnrH = parseInt( $(this.obj).find("ul>li").css("height"),10);
this.idx = Math.floor(Math.random()*$(this.bnr).length);
this.orient = 1;
this.rollMode = roll_mode;
this.rollSpeed = roll_speed;
this.grpNum = grp_num; //한번에이동하는 배너 묶음갯수(한화면에서 나타나는 갯수)
this.btnIndex;

this.init = function(){

if(!_root.grpNum){
_root.grpNum = 1; //상품그룹핑 갯수(한화면에서 나타나는 갯수), 기본값 1
}

_root.btnIndex = Math.floor(_root.idx/_root.grpNum); //버튼 인덱스 설정

//그룹핑갯수가 1보다 많으면 맨 뒷것까지 보기위해서 배너 갯수만큼 복사.



//전체배너를 가로로 배열하기 위해 폭 설정
$(_root.obj).find("ul").css("width",(_root.bnrW*$(_root.bnr).length)+"px");

//위치 초기설정
$(_root.obj).find("ul").css({"margin-left":-(_root.idx*_root.bnrW)+"px"});

_root.rolling(1);

$(_root.aTag).eq(_root.btnIndex).find("img").attr({"src":
function(index,src){
return src.replace('_out','_over');
},"class":""});

$(_root.aTag).click(function(){ return false; });

$(_root.aTag).hover(
function(){

//오토롤링 멈춤
_root.rolling();

//다음배너 인덱스 추출
var trg_idx = $(_root.aTag).index(this);

//이번배너와 다음배너가 버튼 롤로버가 다르면 변환..
if(trg_idx != _root.idx){

//이전배너 오버버튼 아웃으로
$(_root.aTag).eq(_root.btnIndex).find("img").attr("src",
function(index,src){
return src.replace('_over','_out');
});


_root.btnIndex = trg_idx;
_root.idx = trg_idx*_root.grpNum;


//다음배너 아웃버튼 오버로..
$(_root.aTag).eq(_root.btnIndex).find("img").attr("src",
function(index,src){
return src.replace('_out','_over');
});

//페이드효과로 장면전환
//_root.fading(trg_idx);
$(_root.obj).find("ul").fadeOut(100,
function(){
$(this).css("margin-left",-(_root.idx*_root.bnrW)+"px");
$(this).fadeIn(300);
}
);

}

},
function(){
_root.rolling(1);
}
);
}

this.sliding = function(trg_idx){
//슬라이드 효과로 장면전환
$(_root.obj).find("ul").animate({"margin-left":-(trg_idx*_root.bnrW)+"px"},500);
}

this.fading = function(trg_idx){

//페이드효과로 장면전환
$(_root.obj).find("ul").fadeOut(100,
function(){
$(this).css("margin-left",-(trg_idx*_root.bnrW)+"px");
$(this).fadeIn(300);
}
);
}

this.timer = null;

this.rolling = function(rolling_mode){
if(rolling_mode){
var cnt = _root.idx;
var trg_idx = cnt;
_root.timer = setInterval(
function(){
if( ( _root.bnr.length - _root.grpNum) <= cnt ) cnt *= -1;

trg_idx = Math.abs(++cnt);

$(_root.aTag).eq(_root.btnIndex).find("img").attr("src",
function(index,src){
return src.replace('_over','_out');
});

if(_root.rollMode == "sliding") _root.sliding(trg_idx);
else _root.fading(trg_idx);

_root.idx = trg_idx;
_root.btnIndex = Math.floor(_root.idx/_root.grpNum);

$(_root.aTag).eq(_root.btnIndex).find("img").attr("src",
function(index,src){
return src.replace('_out','_over');
});



},_root.rollSpeed);

}else{
clearInterval(_root.timer);
_root.timer = null;
}
}

this.init();
}


//인스턴스 객체 생성
var bnr_thema = new BnrModule("bnr_thema", "sliding", 5000); //배너박스 ID, 장면효과 종류[str 예: "sliding", "fading"], 장면효과 스피드 수치 [1/1000초]
var bnr_sil = new BnrModule("bnr_silhouette", "fading", 3000);
var bnr_new = new BnrModule("bnr_new", "sliding", 2000, 4); //맨 뒤 인자값은 한 화면에 보여지는 상품갯수이므로 네비버튼 롤로버시에 인자값의 갯수단위로 화면전환된다.



//============================================================== HTML


<!-- bnr_thema -->
<div id="bnr_thema">
<ul>
<li><a href="#"><img src="/shopimages/img/bnr_thema/bnr_thema_cap.jpg" alt="신형 다기능 모자" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_thema/bnr_thema_waterjaket.jpg" alt="방수 자켓" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_thema/bnr_thema_windjaket.jpg" alt="방수 바람막이 자켓" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_thema/bnr_thema_bag.jpg" alt="고급 배낭형 가방" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_thema/bnr_thema_hand.jpg" alt="뱅키드 장갑" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_thema/bnr_thema_flashlight.jpg" alt="경광봉" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_thema/bnr_thema_foot.jpg" alt="동계,하계 양말" /></a></li>
</ul>
<ol>
<li><a href="#"><img src="/shopimages/img/bnr_thema/btn_thema_cap_out.png" alt="신형 다기능 모자 보기" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_thema/btn_thema_waterjaket_out.png" alt="방수 자켓 보기" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_thema/btn_thema_windjaket_out.png" alt="방수 바람막이 자켓 보기" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_thema/btn_thema_bag_out.png" alt="고급 배낭형 가방 보기" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_thema/btn_thema_hand_out.png" alt="뱅키드 장갑 보기" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_thema/btn_thema_flashlight_out.png" alt="경광봉 보기" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_thema/btn_thema_foot_out.png" alt="동계, 하계 양말 보기" /></a></li>
</ol>
</div>
<!-- bnr_thema -->


<div id="bnr_silhouette">
<ol>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/btn_silhouette_1_out.gif" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/btn_silhouette_2_out.gif" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/btn_silhouette_3_out.gif" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/btn_silhouette_4_out.gif" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/btn_silhouette_5_out.gif" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/btn_silhouette_6_out.gif" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/btn_silhouette_7_out.gif" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/btn_silhouette_8_out.gif" alt="" /></a></li>
</ol>
<ul>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/bnr_silhouette_1.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/bnr_silhouette_2.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/bnr_silhouette_3.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/bnr_silhouette_4.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/bnr_silhouette_5.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/bnr_silhouette_6.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/bnr_silhouette_7.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_silhouette/bnr_silhouette_8.jpg" alt="" /></a></li>
</ul>
</div><!-- #bnr_silhouette //-->

<div id="bnr_new">
<div>
<h4><img src="/shopimages/img/bnr_new/title_new.gif" alt="" /></h4>
<ol>
<li><a href="#"><img src="/shopimages/img/bnr_new/btn_new_1p_out.gif" alt="New Arrivals - 1 page" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_new/btn_new_2p_out.gif" alt="New Arrivals - 2 page" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_new/btn_new_3p_out.gif" alt="New Arrivals - 3 page" /></a></li>
</ol>
<ul>
<li><a href="#"><img src="/shopimages/img/bnr_new/bnr_new_1.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_new/bnr_new_2.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_new/bnr_new_3.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_new/bnr_new_4.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_new/bnr_new_5.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_new/bnr_new_6.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_new/bnr_new_7.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_new/bnr_new_8.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_new/bnr_new_9.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_new/bnr_new_10.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_new/bnr_new_11.jpg" alt="" /></a></li>
<li><a href="#"><img src="/shopimages/img/bnr_new/bnr_new_12.jpg" alt="" /></a></li>
</ul>
</div>

<a href="#"><img src="/shopimages/img/bnr_new/bnr_cooltosi.jpg" alt="기능성 COOL토시 - 사람과 자연이 만나는 기능성 제품" /></a>

</div><!-- #bnr_new //-->




//====================================================== CSS

#bnr_thema > ul { }
#bnr_thema > ul > li { float:left; width:631px; height:350px }
#bnr_thema > ol { position: absolute; width: 602px; height:36px; background:url(/shopimages/img/bnr_thema/btn_thema_bg.png) no-repeat;
padding:5px 0 0 5px; left:200px;top:300px }
#bnr_thema > ol > li { float:left; }


#bnr_silhouette { position: relative; float:left; width:173px; height:294px; margin:10px 10px 0 0;overflow: hidden; background-color:#f3f4ee }

#bnr_silhouette > ol { border-left: 1px solid #ccc; height:294px }
#bnr_silhouette > ol > li { float: left; width:43px; height:52px; margin-bottom:190px }

#bnr_silhouette > ul { position: absolute; top:52px }
#bnr_silhouette > ul > li { float: left; width:173px; height:190px;}



#bnr_new { position: relative; width:630px; float:left; }
#bnr_new > div { width:629px; height:213px; border: 1px solid #ccc; border-width:0 0 1px 1px; overflow:hidden; margin-bottom:10px }
#bnr_new > div > h4 { float: left; padding:15px 10px; }
#bnr_new > div > ol { float:right; padding:0; margin:15px 15px 0 0 }
#bnr_new > div > ol > li { display: inline; padding:0 }
#bnr_new > div > ul { clear:both; padding: 0; width:2000px }
#bnr_new > div > ul > li { float:left; padding: 0; width:158px; height:162px }