처음으로 div로 만들다보니 시행착오가 너무 많군요..ㅠㅠ


일종의 배너 이미지 슬라이딩 스킨인데, 제목도 함께 띄우고 싶어서 이리저리 노력해왔는데 계속 문제가 생기네요...

혹시 해결책 좀 알려주시면 감사하겠습니다..T_T;;



<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

$data_path = $g4[path]."/data/file/$bo_table";
$thumb_path = $data_path.'/thumb';
?>
<script>
/*
rolling page by hong..
*/
var leftCt = 0;
$(function(){
$("#album").attr("top", "0");
imgStart("R");
});
function imgStart(tp){
clearInterval($("#imgList").attr("timer"));
if(tp == "R"){ // 오른쪽 이동
imgRight();
$("#imgList").attr("timer", setInterval("imgRight()", 3000)); // 멈춰있는 시간
}else{ // 왼쪽이동
if(leftCt == 0){
var leng = $("#imgList div").size();
$("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
$("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
$("#imgList>div").eq(leng).remove();
leftCt = 1;
}
imgLeft();
$("#imgList").attr("timer", setInterval("imgLeft()", 3000));
}
}
function imgRight(){
$("#imgList").animate({
left : parseInt($("#imgList div").eq(0).width() * -1)
},300,function(){
$("#imgList").css("left", "0px");
$("#imgList>div").eq(0).clone().appendTo($("#imgList"));
$("#imgList>div").eq(0).remove();
});
}
function imgLeft(){
var leng = $("#imgList div").size();
$("#imgList").animate({
left : 0
},300,function(){
$("#imgList").css("left", "0px");
$("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
$("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
$("#imgList>div").eq(leng).remove();
});
}
</script>
<style>

#back {position:relative; width:220px; height:230px;  background-color:#fafafa; border:#e2e6e9 1px solid;}
#subject {position:relative; width:220px; height:20px;  background-color:#fafafa; border:#e2e6e9 1px solid;}
#viewArea {position:relative; width:160px; height:75px; overflow:hidden; left:28px; top:18px;}
#imgList {position:absolute; width:800px; left:0px; top:0px;}
#imgList div {float:left; padding:0px; }
#btnLeft {position:absolute; left:10px; float:left; z-index:10; top:43px; cursor:hand;}
#btnmid {position:absolute; left:30px; float:left; z-index:10; top:43px; cursor:hand;}
#btnRight {position:absolute; right:10px; float:right; z-index:10; top:43px; cursor:hand;}
</style>
<div id="back">
<div><img src="http://ku-kung.co.kr/skin/latest/slide_jqgallery/mm.jpg"></div>
<div id="viewArea">
<div id="imgList">
    <? for ($i=0; $i<count($list); $i++) {

$image = $list[$i][file][0][file]; //원본
$img=$data_path. "/".$image;  //썸네일이 없을경우 원본출력
$thumb = $thumb_path. "/". $list[$i][wr_id];
?><?$list[$i]['subject']?>
<div><a href="<?=$list[$i]['href']?>"><img src='<?=$img?>' width="160" height="75" border="0"></a></div>
    <? } ?>
</div>   
</div>
<div id="subject">
<div id="btnLeft">
<span onClick="imgStart('L')"><img src='<?=$latest_skin_path?>/img/btn_left.gif' border="0" align=absmiddle></span>
</div>
<div id="btnmid"> ★이곳에 제목을 출력하고 싶습니다...★</div>
<div id="btnRight">
<span onClick="imgStart('R')"><img src='<?=$latest_skin_path?>/img/btn_right.gif' border="0" align=absmiddle></span>
</div>
</div>
</div>