<script type="text/javascript">
<!--
$(function(){
$(".tabl_photo li a").eq(0).attr("class","on");
$(".tabl_photo li a").click(function(){
var tabl_photo = $(".tabl_photo ul").find("li").length;
for(var i=0; i<tabl_photo; i++){
$(".tabl_photo li a").eq(i).attr("class","off");
}
var slider = $("#slider").find("ul").length;
var class2 = $(this).attr("id");
var class_sub = class2.substring(4,5)
for(var i=0; i<slider; i++){
$("#slider ul").eq(i).attr("style","display:none;");
}
var slider2 = $("#center_pic").find("dl").length;
for(var i=0; i<slider2; i++){
$("#center_pic dl").eq(i).attr("style","display:none;");
}

var slider2 = $("#slider").find("div").length;
for(var i=0; i<slider2; i++){
$("#slider div").eq(i).attr("style","display:none;");
}
$("#slider div").eq(class_sub).attr("style","display:block;");
$("#slider ul").eq(class_sub).attr("style","display:block;");
$("#center_pic dl").eq(class_sub).attr("style","display:block;");
$(this).attr("class","on");

var img_num;
if(class2.length>7){
img_num = class2.substring(6,8)
}else{
img_num = class2.substring(6,7)
}
var pro_btn = img_num-1;
var main_pro2 = "/images/sub01/btn_on.gif";
$(".icon a img").eq(pro_btn).attr("src",main_pro2);

var main_s;
if(img_num.length>1){
main_s = "/images/sub01/pic_"+img_num+".jpg";
}else{
main_s = "/images/sub01/pic_0"+img_num+".jpg";
}

$("#main img").attr("src",main_s);
return false;
});

});
//-->
</script>






<script type="text/javascript">
$(function(){
$("#slider a").mouseover(function(){ //mouseover ,click
var href = $(this).attr("class");
var img_num = href.substring(4,5);
if(img_num==1){
img_num = href.substring(4,6);
}
var slider2 = $("#slider").find("div").length;
for(var i=0; i<11; i++){
var main_pro = "/images/sub01/btn_off.gif";
$(".icon a img").eq(i).attr("src",main_pro);
}
var main_pro2 = "/images/sub01/btn_on.gif";
var pro_btn = img_num-1;
$(".icon a img").eq(pro_btn).attr("src",main_pro2);
var main_s;
if(img_num.length>1){
main_s = "/images/sub01/pic_"+img_num+".jpg";
}else{
main_s = "/images/sub01/pic_0"+img_num+".jpg";
}
$("#main img").attr("src",main_s);

return false;
});
});
</script>


<div class="tabl_photo">
<ul id="tab1">
<li><a id="tab_0_1" href="#">지하2층</a></li>
<li><a id="tab_1_2" href="#">지하1층</a></li>
<li><a id="tab_2_5" href="#">1층</a></li>
<li><a id="tab_3_8" href="#">2층</a></li>
<li><a id="tab_4_10" href="#">3층</a></li>
</ul>
</div>

<div id="slider">
<ul class="main" id="main" style="display: block;">
<li><img alt="" src="/template/yi01/pic_01.jpg"></li>
</ul>
<ul class="main" id="main" style="display: none;">
<li><img alt="" src="/template/yi01/pic_02.jpg"></li>
</ul>
<ul class="main" id="main" style="display: none;">
<li><img alt="" src="/template/yi01/pic_05.jpg"></li>
</ul>
<ul class="main" id="main" style="display: none;">
<li><img alt="" src="/template/yi01/pic_08.jpg"></li>
</ul>
<ul class="main" id="main" style="display: none;">
<li><img alt="" src="./template/yi01/pic_10.jpg"></li>
</ul>

<div class="icon" style="display: block;">
<a class="pro_1" href="#1"><img id="popupNum1" alt="1번째 사진보기" src="/template/yi01/btn_on.gif"></a>
</div>
<div class="icon" style="display: none;">
<a class="pro_2" href="#1"><img id="popupNum2" alt="1번째 사진보기" src="/template/yi01/btn_on.gif"></a>
<a class="pro_3" href="#2"><img id="popupNum3" alt="2번째 사진보기" src="/template/yi01/btn_off.gif"></a>
<a class="pro_4" href="#3"><img id="popupNum4" alt="3번째 사진보기" src="/template/yi01/btn_off.gif"></a>
</div>
<div class="icon" style="display: none;">
<a class="pro_5" href="#1"><img id="popupNum5" alt="1번째 사진보기" src="/template/yi01/btn_on.gif"></a>
<a class="pro_6" href="#2"><img id="popupNum6" alt="2번째 사진보기" src="/template/yi01/btn_off.gif"></a>
<a class="pro_7" href="#3"><img id="popupNum7" alt="3번째 사진보기" src="/template/yi01/btn_off.gif"></a>
</div>
<div class="icon" style="display: none;">
<a class="pro_8" href="#1"><img id="popupNum8" alt="1번째 사진보기" src="/template/yi01/btn_on.gif"></a>
<a class="pro_9" href="#2"><img id="popupNum9" alt="2번째 사진보기" src="/template/yi01/btn_off.gif"></a>
</div>
<div class="icon" style="display: none;">
<a class="pro_10" href="#1"><img id="popupNum10" alt="1번째 사진보기" src="/template/yi01/btn_on.gif"></a>
<a class="pro_11" href="#2"><img id="popupNum11" alt="2번째 사진보기" src="/template/yi01/btn_off.gif"></a>
</div>

<p class="clr"> </p>

</div>



저작자표시

'progarm_old > [HTML-Jquery]' 카테고리의 다른 글

[css] background-url  (0) 2014.10.16
[jquery] 건설 슬라이드  (0) 2014.10.10
[jquery] 간단한 온,오버  (0) 2014.03.26
[jquery] 레이어팝업  (0) 2014.03.26
[jquery] cookie 하루열지 않음  (0) 2014.01.16

+ Recent posts

티스토리툴바