비쥬얼 메인 스크립트
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style type="text/css"> .blind{visibility:hidden;overflow:hidden;position:absolute;left:-999em;width:0;height:0;font-size:0;line-height:0} #popup_wrap{display:block;position:relative;z-index:10000;width:990px;margin:0 auto} #container{display:block;position:relative;z-index:1;width:100%;} #sepcialmenu_off{display:block;position:absolute;top:0;left:40px;z-index:9990;width:132px;height:17px;} #sepcialmenu_on{display:none;overflow:hidden;top:0;left:40px;position:absolute;z-index:21;width:132px;height:157px;} #banner_off{display:block;position:absolute;bottom:0px;left:0;z-index:9990;width:971px;height:17px;} #banner_on{display:block;overflow:hidden;bottom:-100px;left:0;position:absolute;z-index:31;width:971px;height:191px;text-align:left;background:url(/images/banner/bg.png) no-repeat left top} #banner_on table{margin:5px 0 0 6px} #banner_on table tr td{padding:0 5px 5px 0;} #banner_on .banner_btn_up{width:971px;padding-top:1px;text-align:center} .visual_img{display:block;overflow:hidden;position:absolute;z-index:2;top:0;left:0;width:100%;height:640px;background:url(/images/2015_winter/visual1_bg.jpg) no-repeat center top} #visual{display:block;position:relative;z-index:10;width:1001px;min-width:1001px;height:640px;margin:0 auto; overflow:hidden} #visual_img{display:block;position:absolute; z-index:11;left:0;bottom:0;width:765px;height:460px} #visual_btn{position:absolute;z-index:20;top:600px;left:370px;width:200px;height:15px} #visual_btn ul{clear:both;} #visual_btn ul li{display:block;float:left;padding:0 4px 0 4px;} #visual_thumnail #visual_thumnail_list{clear:both;width:140px;height:18px;} #visual_thumnail #visual_thumnail_list ul {clear:both;padding-right:0px;} #visual_thumnail #visual_thumnail_list ul li{display:inline;float:left; padding:0 4px 0 4px;} .visual_txt{position:absolute;z-index:20;top:0px;left:0px;width:1001px;height:310px} .hidden{ display:none} </style> <script type="text/javascript" charset="euc-kr" src="http://www.bugokhawaii.co.kr/js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> <!-- /* 메인 페이딩 인아웃 */ (function($) { var vo_timer = null; var vi_cnt = 0; var vi_max = 0; var vo_this = null; var vo_wrap = null; var vo_list = []; var vo_use = []; var vi_time = 3000; var vi_sleep = 3000; var vo_images = []; var vo_src = []; $.imgRotationFade = { /* 설정 */ setting : function(options, event) { vo_this = this; if(options) { vo_wrap = options.wrap ? $(options.wrap) : $(body); vo_use = options.use ? options.use : []; vi_time = options.time ? options.time : vi_time; vi_sleep = options.sleep ? options.sleep : vi_sleep; vo_list = options.list ? options.list : []; vo_list_txt = options.list_txt ? options.list_txt : []; vo_images = options.img_wrap ? options.img_wrap : []; vo_txt = options.txt_wrap ? options.txt_wrap : []; } vo_this.init(); }, init: function(){ vi_max = vo_list.length; if(vi_max > 0) { vo_this.setBackground(vo_images.eq(0), vo_list[0]); vo_this.setBackground(vo_images.eq(1), vo_list[1]); vo_this.setText(vo_txt.eq(0), vo_list_txt[0]); vo_images.eq(1).hide(); vo_txt.eq(1).hide(); vo_timer = setTimeout(function(){vo_this.start();}, vi_sleep); } }, setBackground: function(aro_obj, ars_src) {aro_obj.css({'background':'url('+ars_src+') no-repeat top center'});}, setText: function(aro_obj, ars_src) {aro_obj.find('img').attr('src', ars_src);}, start: function(){ clearTimeout(vo_timer); var li_now = vi_cnt; vi_cnt++; var li_next = vi_cnt; if(li_next >= vi_max) { li_next = 0; vi_cnt = 0; } setTimeout(function(){vo_this.startTxt(li_now, li_next);}, (vi_sleep /2)); vo_txt.eq(0).fadeOut(vi_time); vo_this.setBackground(vo_images.eq(1), vo_list[li_next]); vo_images.eq(1).fadeIn(vi_time, function(){ }); vo_images.eq(0).fadeOut(vi_time, function(){ vo_this.setBackground(vo_images.eq(0), vo_list[li_next]); vo_images.eq(1).hide(); vo_images.eq(0).show(); vo_timer = setTimeout(function(){vo_this.start();}, vi_sleep); }); }, startTxt: function(ari_now, ari_next){ vo_this.setText(vo_txt.eq(1), vo_list_txt[ari_next]); vo_txt.eq(1).fadeIn(vi_time, function(){ vo_this.setText(vo_txt.eq(0), vo_list_txt[ari_next]); vo_txt.eq(1).hide(); vo_txt.eq(0).show(); }); } } })(jQuery); var vo_schedule = null; $(document).ready(function(){ /* 메인페이지 로링 */ //lfc_mainImgGo(5000, 3000); var lo_sepcialmenu_on = $('#sepcialmenu_on'); var lo_sepcialmenu_off = $('#sepcialmenu_off'); var lo_sepcialmenu_up = $('#sepcialmenu_on_up') lo_sepcialmenu_on.hide(); lo_sepcialmenu_off.on('click', function(){lo_sepcialmenu_on.slideDown('fast', function(){lo_sepcialmenu_off.hide();});}); lo_sepcialmenu_up.on('click', function(){lo_sepcialmenu_on.slideUp('fast',function(){lo_sepcialmenu_off.show();});}); lfc_banners(200, 1000); // 높이, 스피드 /* 메인 이미지 로테이션 */ var lo_rotation = function(){ var lo_wrap = $('#visual'); var lo_list_img = []; $('#_m_visual_main img').each(function(){lo_list_img.push($(this).attr('src'));}); var lo_visual_img = $('.visual_img'); if(lo_list_img.length > 0) { var lo_imgRotationFade = $.imgRotationFade; lo_imgRotationFade.setting({ wrap: lo_wrap ,use: 1 ,time: 2000 ,sleep: 4000 ,list: lo_list_img ,img_wrap: $('.visual_img') ,txt_wrap: $('.visual_txt') ,list_txt: [ 'http://www.bugokhawaii.co.kr/images/2015_winter/visual1_txt.png' ,'http://www.bugokhawaii.co.kr/images/2015_winter/visual2_txt.png' ,'http://www.bugokhawaii.co.kr/images/2015_winter/visual3_txt.png' ,'http://www.bugokhawaii.co.kr/images/2015_winter/visual4_txt.png' ,'http://www.bugokhawaii.co.kr/images/2015_winter/visual5_txt.png' ] }); } } lo_rotation(); }); function lfc_banners(ari_top, ari_speed) { var li_default_top = 640; var lo_banner_off = $('#banner_off'); var lo_banner_on = $('#banner_on'); var lo_banner_up = $('#banner_up'); lo_banner_on.css({'top' : li_default_top + 'px'}); lo_banner_off.on('click', function(){ lo_banner_on.animate({ top: (li_default_top - ari_top) + 'px' }, ari_speed, function() { lo_banner_off.hide(); }); }); lo_banner_up.on('click', function(){ lo_banner_on.animate({ top: li_default_top + 'px' }, ari_speed, function() { lo_banner_off.show(); }); }); } //--> </script> </HEAD> <BODY> <!-- Visual_bg 시작--> <h3 class="blind">비쥬얼 배경</h3> <div id="visual_in" class="visual_img"></div> <div id="visual_out" class="visual_img" style="dispaly:none"></div> <div id="_m_visual_main" class="blind"> <img src="http://www.bugokhawaii.co.kr//images/2015_winter/visual1_bg.jpg" alt="첫번째 배경" /> <img src="http://www.bugokhawaii.co.kr//images/2015_winter/visual2_bg.jpg" alt="두번째 배경" /> <img src="http://www.bugokhawaii.co.kr//images/2015_winter/visual3_bg.jpg" alt="세번째 배경" /> <img src="http://www.bugokhawaii.co.kr//images/2015_winter/visual4_bg.jpg" alt="네번째 배경" /> <img src="http://www.bugokhawaii.co.kr//images/2015_winter/visual5_bg.jpg" alt="다섯번째 배경" /> </div> <!-- //Visual_bg 끝 --> <div id="visual"> <div id="sepcialmenu_off" class="sepcialmenu_off"><a href="javascript:;"><img src="http://www.bugokhawaii.co.kr/images/sepcialmenu/sepcialmenu_tle2.gif" width="132" height="17" alt="" /></a></div> <div id="sepcialmenu_on" class="sepcialmenu_on hidden"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="javascript:open_window('/guide/map.asp', 0, 0,620, 560, 300, 100, 0, 0, 0)"><img src="/images/sepcialmenu/sepcialmenu_01.gif" width="44" height="70" alt="가이드맵" /></a></td> <td><a href="/guide/year.asp?flag=3"><img src="/images/sepcialmenu/sepcialmenu_02.gif" width="44" height="70" alt="연간회원" /></a></td> <td><a href="/guide/service.asp?flag=1&sflag=4"><img src="/images/sepcialmenu/sepcialmenu_03.gif" width="44" height="70" alt="할인서비스" /></a></td> </tr> <tr> <td><a href="/guide/opentime.asp?flag=1&sflag=3"><img src="/images/sepcialmenu/sepcialmenu_04.gif" width="44" height="70" alt="개장시간편의시설" /></a></td> <td><a href="/guide/payinfo.asp?flag=1&sflag=2"><img src="/images/sepcialmenu/sepcialmenu_05.gif" width="44" height="70" alt="요금정보" /></a></td> <td><a href="/guide/traffic.asp?flag=1&sflag=1"><img src="/images/sepcialmenu/sepcialmenu_06.gif" width="44" height="70" alt="교통정보" /></a></td> </tr> <tr> <td colspan="3" id="sepcialmenu_on_up"><a href="javascript:;"><img src="/images/sepcialmenu/sepcialmenu_tle.gif" width="132" height="17" alt="" /></a></td> </tr> </table> </div> <div id="banner_off" class="sepcialmenu_off"><a href="javascript:;"><img src="/images/banner/tle2.png" width="200" height="20" alt="" /></a></div> <div id="banner_on" class="sepcialmenu_on"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="/water/whang.asp?flag=2&sflag=1"><img src="/images/banner/bn_01.png" width="236" height="76" alt="" /></a></td> <td><a href="/water/spania.asp?flag=1&sflag=1"><img src="/images/banner/bn_02.png" width="236" height="76" alt="" /></a></td> <td><a href="/water/child.asp?flag=3&sflag=2"><img src="/images/banner/bn_03.png" width="236" height="76" alt="" /></a></td> <td><a href="/park/plant.asp?flag=5"><img src="/images/banner/bn_04.png" width="236" height="76" alt="" /></a></td> </tr> <tr> <td><a href="/advan/nature.asp?flag=3&sflag=1"><img src="/images/banner/bn_05.png" width="236" height="76" alt="" /></a></td> <td><a href="/fest/show.asp?flag=1"><img src="/images/banner/bn_06.png" width="236" height="76" alt="" /></a></td> <td><a href="/advan/land.asp?flag=1"><img src="/images/banner/bn_07.png" width="236" height="76" alt="" /></a></td> <td><a href="/band/banquet.asp?flag=5"><img src="/images/banner/bn_08.png" width="236" height="76" alt="" /></a></td> </tr> </table> <div id="banner_up" class="banner_btn_up"><a href="javascript:;"><img src="/images/banner/tle.png" width="200" height="20" alt="" /></a></div> </div> <!-- Visual_img --> <h3 class="blind">비쥬얼 이미지</h3> <!-- //Visual_img --> <!-- Visual_txt --> <h3 class="blind">비쥬얼 타이틀</h3> <div id="visual_txt" class="visual_txt"><img src="/images/2015_winter/visual1_txt.png" alt="" /></div> <div id="visual_txt" class="visual_txt" style="dispaly:none"><img src="/images/2015_winter/visual1_txt.png" alt="" /></div> <div id="_m_visual_text" class="blind"> <img src="http://www.bugokhawaii.co.kr/images/2015_winter/visual1_txt.png" alt="첫번째 타이틀" /> <img src="http://www.bugokhawaii.co.kr/images/2015_winter/visual2_txt.png" alt="두번째 타이틀" /> <img src="http://www.bugokhawaii.co.kr/images/2015_winter/visual3_txt.png" alt="세번째 타이틀" /> <img src="http://www.bugokhawaii.co.kr/images/2015_winter/visual4_txt.png" alt="네번째 타이틀" /> <img src="http://www.bugokhawaii.co.kr/images/2015_winter/visual5_txt.png" alt="다섯번째 타이틀" /> </div> <!-- //Visual_txt --> <!-- <div id="visual_btn"> <h3 class="blind">비쥬얼 버튼</h3> <ul> <li> <div id="visual_thumnail"> <div id="visual_thumnail_list"> <ul> <li><a href="javascript:;"><img src="/images/btn_over.png" width="16" height="18" alt="1" /></a></li> <li><a href="javascript:;"><img src="/images/btn_out.png" width="16" height="18" alt="2" /></a></li> <li><a href="javascript:;"><img src="/images/btn_out.png" width="16" height="18" alt="3" /></a></li> </ul> </div> </div> </li> </ul> </div> --> </div> </div> </BODY> </HTML>
