썸네일 슬라이드

<style type="text/css">
#pho {position:relative;}
#pho .pho-btn {position:absolute;display:block;top:270px;}
#pho #pho-prev {left:0;}
#pho #pho-next {right:0;}
#pho #pho-big {width:910px;height:560px;margin:0 auto;position:relative;overflow:hidden;}
#pho #pho-big img {display:block;float:left;}
#pho #pho-thumb {width:910px;height:135px;margin:0 auto;position:relative;overflow:hidden;padding-top:20px;}
#pho #pho-thumb #pho-thumb-wrap {width:20000px;}
#pho #pho-thumb #pho-thumb-wrap a {display:block;float:left;margin-left:10px;width:220px;height:135px;overflow:hidden;}
#pho #pho-thumb #pho-thumb-wrap a img {display:block;}
#pho #pho-thumb #pho-thumb-wrap a:first-child {margin-left:0;}
#pho #pho-thumb #pho-thumb-wrap .active {border:2px solid #d83b20;width:216px;height:131px;}
#pho #pho-thumb #pho-thumb-wrap .active img {margin:-2px 0 0 -2px;}
</style>

var photoWrap = $("#pho");
var btnPrev = $("#pho-prev");
var btnNext = $("#pho-next");
var bigImg = $("#pho-big");
var bigImgSize = 910;
var speed = 200;
var thmImg = $("#pho-thumb-wrap");
var thmImgSize = 230;
var rollNum = 0;
var ingNum = 0;

btnPrev.hide();//왼쪽 버튼 시작시 숨기기

function moveEvent(){
	var ori = thmImg.children().eq(rollNum).find("img").attr("ori");
	if(rollNum == 0){
		btnPrev.hide();
	}else if(rollNum == thmImg.children().length - 1){
		btnNext.hide();
	}else{
		btnPrev.show();
		btnNext.show();
	}
	bigImg.find("img").attr("src",ori);
	thmImg.children().eq(rollNum).addClass("active").siblings().removeClass("active");
	thmImg.animate({"marginLeft":-thmImgSize * rollNum},speed);
}

function btnPrevMotion(){
	if(rollNum<=0){
		rollNum=0;
	}else{
		rollNum--;
	}
	moveEvent();
}

function btnNextMotion(){
	if(rollNum>=thmImg.children().length - 1){
		rollNum=thmImg.children().length - 1;
	}else{
		rollNum++;
	}
	moveEvent();
}

function thmFunc(){
	rollNum = $(this).index();
	moveEvent();
}

function clickOk(){
	ingNum = 0;
}

btnPrev.click(function(){
	btnPrevMotion();
	return false;
});

btnNext.click(function(){
	btnNextMotion();
	return false;
});

thmImg.children().click(function(){
	rollNum = $(this).index();
	moveEvent();
	return false;
});