메인배너 수정 관련 채택완료
하우두
4년 전
조회 2,716
덕서리님의 메인 배너를 쓰려고 하는데 크기를 변경하니 깨져서 여기에 한번 문의 드려봅니다 ㅠㅠ
</p>
<p><style></p>
<p>.image_list {overflow: hidden;position: relative;height: 290px;width: 698px; border:1px solid #e1e1e1; cursor:pointer;}</p>
<p>.image_list .images {position:absolute; display:none; }</p>
<p>ul, li {list-style:none; margin:0; padding:0;}</p>
<p>.ul_label {width:698px;cursor:pointer;}</p>
<p>.ul_label li.fir {width:190px;margin:0 auto;}</p>
<p> </p>
<p>.no_label {width:698px;cursor:pointer;}</p>
<p>.no_label li {width:190px;height:50px;float:center;}</p>
<p>
</p>
<p>.ul_label li.labelOverClass {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner1_on.gif');}</p>
<p>.ul_label li.labelOverClass1 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner2_on.gif');}</p>
<p>.ul_label li.labelOverClass2 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner3_on.gif');}</p>
<p>.ul_label li.labelOverClass3 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner4_on.gif');}</p>
<p>.ul_label li.labelOverClass4 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner5_on.gif');}</p>
<p>.ul_label li.labelOverClass5 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner6_on.gif');}</p>
<p> </p>
<p></style></p>
<p><script type="text/javascript"></p>
<p><!--</p>
<p>/*function RollImage(json){</p>
<p> this.current_img = 0;</p>
<p> this.next_img = 1;</p>
<p> </p>
<p> this.list_area = e(json.list_area);</p>
<p> this.image_list = this.list_area.getElementsByTagName("DIV");</p>
<p> this.img_cnt = this.image_list.length-1;</p>
<p> this.roll_time = json.roll_time;</p>
<p> this.move_time = json.move_time;</p>
<p> this.coord_x1 = 0;</p>
<p> this.coord_x2 = this.list_area.offsetWidth;</p>
<p> this.moveAt = json.moveAt;</p>
<p> </p>
<p> setRoll(this);</p>
<p>}</p>
<p>//À̹ÌÁö ·Ñ¸µ ±âº» ¼¼ÆÃÇϱâ</p>
<p>function setRoll(o){</p>
<p> o.coord_x1 = 0;</p>
<p> o.coord_x2 = o.list_area.offsetWidth;</p>
<p> </p>
<p> </p>
<p> o.image_list[o.next_img].style.display = "block";</p>
<p> o.image_list[o.next_img].style.left = o.coord_x2+"px";</p>
<p> </p>
<p> setTimeout(function(){imgMove(o)},o.roll_time);</p>
<p>}</p>
<p> </p>
<p>//À̹ÌÁö¸¦ ¿òÁ÷ÀÌ°Ô ÇÑ´Ù.</p>
<p>function imgMove(o){</p>
<p> </p>
<p> o.image_list[o.current_img].style.left = o.coord_x1 + "px";</p>
<p> o.image_list[o.next_img].style.left = o.coord_x2 + "px";</p>
<p> </p>
<p> o.coord_x1 -= o.moveAt;</p>
<p> o.coord_x2 -= o.moveAt;</p>
<p> </p>
<p> if(o.coord_x1 < (-1*o.list_area.offsetWidth) ) {</p>
<p> o.current_img = o.next_img;</p>
<p> o.next_img += 1;</p>
<p> if(o.current_img == o.img_cnt) o.next_img = 0;</p>
<p> clearTimeout(o.move_timer);</p>
<p> o.roll_timer = setTimeout(function(){setRoll(o)},o.roll_time);</p>
<p> return;</p>
<p> }</p>
<p> o.move_timer = setTimeout(function(){imgMove(o)},o.move_time);</p>
<p>}</p>
<p>*/</p>
<p> </p>
<p>function RollImage(json){</p>
<p> //À̹ÌÁö ·Ñ¸µ ¼³Á¤°ª</p>
<p> var config = {</p>
<p> currentImg : 0,</p>
<p> nextImg : 1,</p>
<p> listArea : e(json.list_area),</p>
<p> imageList : e(json.list_area).getElementsByTagName("DIV"),</p>
<p> imgCnt : e(json.list_area).getElementsByTagName("DIV").length-1, //0ºÎÅÍ ½ÃÀÛ</p>
<p> rollTime : json.roll_time,</p>
<p> moveTime : json.move_time,</p>
<p> coordX1 : 0,</p>
<p> coordX2 : e(json.list_area).offsetWidth,</p>
<p> coordY : e(json.list_area).offsetHeight,</p>
<p> moveAt : json.moveAt,</p>
<p> direction : json.direction,</p>
<p> label : e(json.label),</p>
<p> labelType : json.labelType</p>
<p> };</p>
<p> </p>
<p> labelBind(config); //¶óº§(¹öÆ°) ¹ÙÀεå</p>
<p> setRoll(config); //·Ñ¸µ ½ÃÀÛ</p>
<p> rollPause(config); //¸¶¿ì½º ¿À¹ö½Ã ·Ñ¸µ ¸ØÃã</p>
<p> </p>
<p> //À̹ÌÁö ·Ñ¸µ ±âº» ¼¼ÆÃÇϱâ</p>
<p> function setRoll(c){</p>
<p> c.coordX1 = 0;</p>
<p> c.coordX2 = c.listArea.offsetWidth;</p>
<p> c.coordY = c.listArea.offsetHeight;</p>
<p> </p>
<p> if(c.direction=="right" || c.direction=="down"){</p>
<p> c.coordX2 = c.coordX2 * -1;</p>
<p> c.coordY = c.coordY * -1;</p>
<p> }</p>
<p> </p>
<p> c.imageList[c.nextImg].style.display = "block";</p>
<p> setPosition(c);</p>
<p> rollOver(c)</p>
<p> //c.imageList[c.nextImg].style.left = c.coordX2+"px";</p>
<p> </p>
<p> c.rollTimer = setTimeout(function(){imgMove(c)},c.rollTime);</p>
<p> };</p>
<p> </p>
<p> //À̹ÌÁö¸¦ ¿òÁ÷ÀÌ°Ô ÇÑ´Ù.</p>
<p> function imgMove(c){</p>
<p> if(c.direction == "left" || c.direction == "right"){</p>
<p> c.imageList[c.currentImg].style.left = c.coordX1 + "px";</p>
<p> c.imageList[c.nextImg].style.left = c.coordX2 + "px";</p>
<p> }else if(c.direction == "up" || c.direction == "down"){</p>
<p> c.imageList[c.currentImg].style.top = c.coordX1 + "px";</p>
<p> c.imageList[c.nextImg].style.top = c.coordY + "px";</p>
<p> }</p>
<p> //alert(c.imageList[c.nextImg].style.left);</p>
<p> var moveAt = parseInt(c.moveAt);</p>
<p> if (c.direction == "left"){</p>
<p> c.coordX1 -= moveAt;</p>
<p> c.coordX2 -= moveAt;</p>
<p> }else if(c.direction == "right"){</p>
<p> c.coordX1 += moveAt;</p>
<p> c.coordX2 += moveAt;</p>
<p> }else if(c.direction=="up"){</p>
<p> c.coordX1 -= moveAt;</p>
<p> c.coordY -= moveAt;</p>
<p> }else if(c.direction=="down"){</p>
<p> c.coordX1 += moveAt;</p>
<p> c.coordY += moveAt;</p>
<p> }</p>
<p> </p>
<p> //if(c.coordX1 < (-1*c.listArea.offsetWidth) ) {</p>
<p> if( isNextImgRoll(c) ) {</p>
<p> c.currentImg = c.nextImg;</p>
<p> c.nextImg += 1;</p>
<p> if(c.currentImg == c.imgCnt) c.nextImg = 0;</p>
<p> clearTimeout(c.moveTimer);</p>
<p> clearTimeout(c.rollTimer);</p>
<p> setRoll(c);</p>
<p> return;</p>
<p> }</p>
<p> c.moveTimer = setTimeout(function(){imgMove(c)},c.moveTime);</p>
<p> };</p>
<p> </p>
<p> //´ÙÀ½ À̹ÌÁö ·Ñ¸µ ÇؾßÇÏ´ÂÁö È®ÀÎ</p>
<p> function isNextImgRoll(c){</p>
<p> var d = c.direction;</p>
<p> if(d=="left" && c.coordX2 < 0 ) return true;</p>
<p> else if(d=="right" && c.coordX2 > 0) return true;</p>
<p> else if(d=="up" && c.coordY < 0 ) return true;</p>
<p> else if(d=="down" && c.coordY > 0) return true;</p>
<p> </p>
<p> return false</p>
<p> };</p>
<p> </p>
<p> //·Ñ¸µ ¹æÇâ¿¡ µû¸¥ µÎ¹ø° À̹ÌÁö À§Ä¡ ÁÂÇ¥ ¼³Á¤</p>
<p> function setPosition(c){</p>
<p> var d = c.direction;</p>
<p> if(d=="left") c.imageList[c.nextImg].style.left = c.listArea.offsetWidth+"px";</p>
<p> else if(d=="right") c.imageList[c.nextImg].style.left = (-1 * c.listArea.offsetWidth) + "px";</p>
<p> else if(d=="up") c.imageList[c.nextImg].style.top = c.listArea.offsetHeight + "px";</p>
<p> else if(d=="down") c.imageList[c.nextImg].style.top = (-1 * c.listArea.offsetHeight) + "px";</p>
<p> </p>
<p> //alert(c.imageList[c.nextImg].style.left);</p>
<p> };</p>
<p> </p>
<p> //onmouseover ½Ã ¿òÁ÷ÀÓ ¸ØÃã</p>
<p> function rollPause(c){</p>
<p> //alert(c.listArea.onmouseover);</p>
<p> c.listArea.onmouseover = function(){</p>
<p> clearTimeout(c.rollTimer);</p>
<p> }</p>
<p> </p>
<p> c.listArea.onmouseout = function(){</p>
<p> //alert("c.listArea.onmouseout");</p>
<p> setRoll(c);</p>
<p> }</p>
<p> };</p>
<p> </p>
<p> //¶óº§°ú ¹ÙÀεå</p>
<p> function labelBind(c){</p>
<p> if(c.label == null) return;</p>
<p> var labels = c.label.getElementsByTagName(c.labelType);</p>
<p> </p>
<p> c.label.onmouseover = function(){</p>
<p> for(n in labels){</p>
<p> if(labels[n] == event.srcElement){</p>
<p> //c.imageList[c.currentImg].style.display = "none";</p>
<p> c.currentImg = parseInt(n);</p>
<p> c.nextImg = parseInt(n)+1;</p>
<p> if(c.currentImg == c.imgCnt) c.nextImg = 0;</p>
<p> clearTimeout(c.rollTimer);</p>
<p> viewImg(c);</p>
<p> rollOver(c);</p>
<p> break;</p>
<p> }</p>
<p> }</p>
<p> //alert(event.srcElement)</p>
<p> }</p>
<p> </p>
<p> c.label.onmouseout = function(){</p>
<p> for(n in labels){</p>
<p> if(labels[n]==event.srcElement){</p>
<p> setRoll(c);</p>
<p> break;</p>
<p> }</p>
<p> }</p>
<p> }</p>
<p> };</p>
<p> </p>
<p> //¶óº§ onmouseover ½Ã Ŭ·¡½º Àû¿ë</p>
<p> function rollOver(c){</p>
<p> if(c.label == null) return;</p>
<p> var els = c.label.getElementsByTagName(c.labelType);</p>
<p> </p>
<p> if(c.labelType == "img"){</p>
<p> </p>
<p> for(n in els){</p>
<p> if(typeof els[n] == "object"){</p>
<p> if(n == c.currentImg){</p>
<p> els[n].src = els[n].getAttribute("oversrc");</p>
<p> }else{</p>
<p> els[n].src = els[n].getAttribute("outsrc");</p>
<p> }</p>
<p> }</p>
<p> }</p>
<p> }else{</p>
<p> for(n in els){</p>
<p> if(typeof els[n] == "object"){</p>
<p> if(n == c.currentImg){</p>
<p> var ocss = els[n].className;</p>
<p> els[n].className = ocss+" "+els[n].getAttribute("overcss");</p>
<p> }else{</p>
<p> els[n].className = els[n].getAttribute("outcss");</p>
<p> }</p>
<p> }</p>
<p> }</p>
<p> }</p>
<p> }</p>
<p> </p>
<p> //¶óº§¿¡¼ ¼±ÅÃµÈ À̹ÌÁö º¸À̱â</p>
<p> function viewImg(c){</p>
<p> //alert(c.currentImg);</p>
<p> for(n=0; n<c.imgCnt+1; n++) {</p>
<p> c.imageList[n].style.display = "none";</p>
<p> }</p>
<p> </p>
<p> c.imageList[c.currentImg].style.left = "0px";</p>
<p> c.imageList[c.currentImg].style.top = "0px";</p>
<p> c.imageList[c.currentImg].style.display = "block";</p>
<p> };</p>
<p>}</p>
<p> </p>
<p>function debug(t){</p>
<p>e("dis").innerHTML = t + "
";</p>
<p>}</p>
<p> </p>
<p>//id°ªÀ¸·Î °´Ã¼ ¹Ýȯ</p>
<p>function e(id){</p>
<p> var o = document.getElementById(id);</p>
<p> if(typeof o == undefined || o == null) { alert(id+" À̸§À» °¡Áø °´Ã¼°¡ ¾ø½À´Ï´Ù."); return null;}</p>
<p> </p>
<p> return o;</p>
<p>}</p>
<p> </p>
<p>function MM_swapImgRestore() { //v3.0</p>
<p> var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;</p>
<p>}</p>
<p> </p>
<p>function MM_preloadImages() { //v3.0</p>
<p> var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();</p>
<p> var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)</p>
<p> if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}</p>
<p>}</p>
<p> </p>
<p>function MM_findObj(n, d) { //v4.01</p>
<p> var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {</p>
<p> d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}</p>
<p> if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];</p>
<p> for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);</p>
<p> if(!x && d.getElementById) x=d.getElementById(n); return x;</p>
<p>}</p>
<p> </p>
<p>function MM_swapImage() { //v3.0</p>
<p> var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)</p>
<p> if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}</p>
<p>}</p>
<p>//--></p>
<p></script></p>
<p></head></p>
<p> </p>
<p><body></p>
<p><ul class="ul_label" id="label_2"></p>
<p> <table width="890"></p>
<p> <tr></p>
<p> <td style="border:1px solid #e1e1e1" width="322" background="images/temp/top_banner1.gif"></p>
<p> <li class="fir" overcss="labelOverClass" outcss="fir"></li></td></p>
<p> <td width="756" rowspan="6"><div class="image_list" id="image_list_2"></p>
<p> <div class="images" style="display:block"><img src="images/temp/google.jpg" /></div></p>
<p> <div class="images"><img src="images/temp/naver.jpg" /></div></p>
<p> <div class="images"><img src="images/temp/yahoo.jpg" /></div></p>
<p> <div class="images"><img src="images/temp/daum.jpg" /></div></p>
<p> <div class="images"><img src="images/temp/nate.jpg" /></div></p>
<p> <div class="images"><img src="images/temp/banner.jpg" /></div></p>
<p></div></td></p>
<p> </tr></p>
<p> <tr></p>
<p> <td style="border:1px solid #e1e1e1" width="192" background="images/temp/top_banner2.gif"><li overcss="labelOverClass1" outcss=""></li></td></p>
<p> </tr></p>
<p> <tr></p>
<p> <td style="border:1px solid #e1e1e1" width="192" background="images/temp/top_banner3.gif"><li overcss="labelOverClass2" outcss=""></li></td></p>
<p> </tr></p>
<p> <tr></p>
<p> <td style="border:1px solid #e1e1e1" width="192" background="images/temp/top_banner4.gif"><li overcss="labelOverClass3" outcss=""></li></td></p>
<p> </tr></p>
<p> <tr></p>
<p> <td style="border:1px solid #e1e1e1" width="192" background="images/temp/top_banner5.gif"><li overcss="labelOverClass4" outcss=""></li></td></p>
<p> </tr></p>
<p> <tr></p>
<p> <td style="border:1px solid #e1e1e1" width="192" background="images/temp/top_banner6.gif"><li overcss="labelOverClass5" outcss=""></li></td></p>
<p> </tr></p>
<p></table></p>
<p></ul></p>
<p><script type="text/javascript"></p>
<p><!--</p>
<p>var j2 = {</p>
<p> "list_area":"image_list_2",</p>
<p> "moveAt":"332",</p>
<p> "roll_time":"3000",</p>
<p> "move_time":"100",</p>
<p> "direction":"up",</p>
<p> "label":"label_2",</p>
<p> labelType : "li"</p>
<p>};</p>
<p>new RollImage(j2);</p>
<p>//oj1.setRoll();</p>
<p>//--></p>
<p></script></p>
<p> </p>
<p></body></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인