메인배너 수정 관련

메인배너 수정 관련

QA

메인배너 수정 관련

답변 1

본문

https://sir.kr/g5_skin/7520

1994198100_1632575586.6003.png

덕서리님의 메인 배너를 쓰려고 하는데 크기를 변경하니 깨져서 여기에 한번 문의 드려봅니다 ㅠㅠ

 


<style>
.image_list {overflow: hidden;position: relative;height: 290px;width: 698px; border:1px solid #e1e1e1; cursor:pointer;}
.image_list .images {position:absolute; display:none; }
ul, li {list-style:none; margin:0; padding:0;}
.ul_label {width:698px;cursor:pointer;}
.ul_label li.fir {width:190px;margin:0 auto;}
 
.no_label {width:698px;cursor:pointer;}
.no_label li {width:190px;height:50px;float:center;}

 
.ul_label li.labelOverClass {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner1_on.gif');}
.ul_label li.labelOverClass1 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner2_on.gif');}
.ul_label li.labelOverClass2 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner3_on.gif');}
.ul_label li.labelOverClass3 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner4_on.gif');}
.ul_label li.labelOverClass4 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner5_on.gif');}
.ul_label li.labelOverClass5 {width:270px;height:50px; text-align:center;font-weight:bold;background-image: url('images/temp/top_banner6_on.gif');}
 
</style>
<script type="text/javascript">
<!--
/*function RollImage(json){
    this.current_img = 0;
    this.next_img = 1;
 
    this.list_area = e(json.list_area);
    this.image_list = this.list_area.getElementsByTagName("DIV");
    this.img_cnt = this.image_list.length-1;
    this.roll_time = json.roll_time;
    this.move_time = json.move_time;
    this.coord_x1 = 0;
    this.coord_x2 = this.list_area.offsetWidth;
    this.moveAt = json.moveAt;
 
    setRoll(this);
}
//À̹ÌÁö ·Ñ¸µ ±âº» ¼¼ÆÃÇϱâ
function setRoll(o){
    o.coord_x1 = 0;
    o.coord_x2 = o.list_area.offsetWidth;
    
    
    o.image_list[o.next_img].style.display = "block";
    o.image_list[o.next_img].style.left = o.coord_x2+"px";
    
    setTimeout(function(){imgMove(o)},o.roll_time);
}
 
//À̹ÌÁö¸¦ ¿òÁ÷ÀÌ°Ô ÇÑ´Ù.
function imgMove(o){
 
    o.image_list[o.current_img].style.left = o.coord_x1 + "px";
    o.image_list[o.next_img].style.left = o.coord_x2 + "px";
 
    o.coord_x1 -= o.moveAt;
    o.coord_x2 -= o.moveAt;
    
    if(o.coord_x1 < (-1*o.list_area.offsetWidth) ) {
        o.current_img = o.next_img;
        o.next_img += 1;
        if(o.current_img == o.img_cnt) o.next_img = 0;
        clearTimeout(o.move_timer);
        o.roll_timer = setTimeout(function(){setRoll(o)},o.roll_time);
        return;
    }
    o.move_timer = setTimeout(function(){imgMove(o)},o.move_time);
}
*/
 
function RollImage(json){
    //À̹ÌÁö ·Ñ¸µ ¼³Á¤°ª
    var config = {
        currentImg : 0,
        nextImg : 1,
        listArea : e(json.list_area),
        imageList : e(json.list_area).getElementsByTagName("DIV"),
        imgCnt : e(json.list_area).getElementsByTagName("DIV").length-1, //0ºÎÅÍ ½ÃÀÛ
        rollTime : json.roll_time,
        moveTime : json.move_time,
        coordX1 : 0,
        coordX2 : e(json.list_area).offsetWidth,
        coordY : e(json.list_area).offsetHeight,
        moveAt : json.moveAt,
        direction : json.direction,
        label : e(json.label),
        labelType : json.labelType
    };
    
    labelBind(config); //¶óº§(¹öÆ°) ¹ÙÀεå
    setRoll(config); //·Ñ¸µ ½ÃÀÛ
    rollPause(config); //¸¶¿ì½º ¿À¹ö½Ã ·Ñ¸µ ¸ØÃã
    
    //À̹ÌÁö ·Ñ¸µ ±âº» ¼¼ÆÃÇϱâ
    function setRoll(c){
        c.coordX1 = 0;
        c.coordX2 = c.listArea.offsetWidth;
        c.coordY = c.listArea.offsetHeight;
 
        if(c.direction=="right" || c.direction=="down"){
            c.coordX2 = c.coordX2 * -1;
            c.coordY = c.coordY * -1;
        }
        
        c.imageList[c.nextImg].style.display = "block";
        setPosition(c);
        rollOver(c)
        //c.imageList[c.nextImg].style.left = c.coordX2+"px";
        
        c.rollTimer = setTimeout(function(){imgMove(c)},c.rollTime);
    };
 
    //À̹ÌÁö¸¦ ¿òÁ÷ÀÌ°Ô ÇÑ´Ù.
    function imgMove(c){
        if(c.direction == "left" || c.direction == "right"){
            c.imageList[c.currentImg].style.left = c.coordX1 + "px";
            c.imageList[c.nextImg].style.left = c.coordX2 + "px";
        }else if(c.direction == "up" || c.direction == "down"){
            c.imageList[c.currentImg].style.top = c.coordX1 + "px";
            c.imageList[c.nextImg].style.top = c.coordY + "px";
        }
        //alert(c.imageList[c.nextImg].style.left);
        var moveAt = parseInt(c.moveAt);
        if (c.direction == "left"){
            c.coordX1 -= moveAt;
            c.coordX2 -= moveAt;
        }else if(c.direction == "right"){
            c.coordX1 += moveAt;
            c.coordX2 += moveAt;
        }else if(c.direction=="up"){
            c.coordX1 -= moveAt;
            c.coordY -= moveAt;
        }else if(c.direction=="down"){
            c.coordX1 += moveAt;
            c.coordY += moveAt;
        }
        
        //if(c.coordX1 < (-1*c.listArea.offsetWidth) ) {
        if( isNextImgRoll(c) ) {
            c.currentImg = c.nextImg;
            c.nextImg += 1;
            if(c.currentImg == c.imgCnt) c.nextImg = 0;
            clearTimeout(c.moveTimer);
            clearTimeout(c.rollTimer);
            setRoll(c);
            return;
        }
        c.moveTimer = setTimeout(function(){imgMove(c)},c.moveTime);
    };
    
    //´ÙÀ½ À̹ÌÁö ·Ñ¸µ ÇؾßÇÏ´ÂÁö È®ÀÎ
    function isNextImgRoll(c){
        var d = c.direction;
        if(d=="left" && c.coordX2 < 0 ) return true;
        else if(d=="right" && c.coordX2 > 0) return true;
        else if(d=="up" && c.coordY < 0 ) return true;
        else if(d=="down" && c.coordY > 0) return true;
 
        return false
    };
 
    //·Ñ¸µ ¹æÇâ¿¡ µû¸¥ µÎ¹ø° À̹ÌÁö À§Ä¡ ÁÂÇ¥ ¼³Á¤
    function setPosition(c){
        var d = c.direction;
        if(d=="left") c.imageList[c.nextImg].style.left = c.listArea.offsetWidth+"px";
        else if(d=="right") c.imageList[c.nextImg].style.left = (-1 * c.listArea.offsetWidth) + "px";
        else if(d=="up") c.imageList[c.nextImg].style.top = c.listArea.offsetHeight + "px";
        else if(d=="down") c.imageList[c.nextImg].style.top = (-1 * c.listArea.offsetHeight) + "px";
 
        //alert(c.imageList[c.nextImg].style.left);
    };
    
    //onmouseover ½Ã ¿òÁ÷ÀÓ ¸ØÃã
    function rollPause(c){
    //alert(c.listArea.onmouseover);
        c.listArea.onmouseover = function(){
            clearTimeout(c.rollTimer);
        }
 
        c.listArea.onmouseout = function(){
            //alert("c.listArea.onmouseout");
            setRoll(c);
        }
    };
 
    //¶óº§°ú ¹ÙÀεå
    function labelBind(c){
        if(c.label == null) return;
        var labels = c.label.getElementsByTagName(c.labelType);
 
        c.label.onmouseover = function(){
            for(n in labels){
                if(labels[n] == event.srcElement){
                    //c.imageList[c.currentImg].style.display = "none";
                    c.currentImg = parseInt(n);
                    c.nextImg = parseInt(n)+1;
                    if(c.currentImg == c.imgCnt) c.nextImg = 0;
                    clearTimeout(c.rollTimer);
                    viewImg(c);
                    rollOver(c);
                    break;
                }
            }
            //alert(event.srcElement)
        }
        
        c.label.onmouseout = function(){
            for(n in labels){
                if(labels[n]==event.srcElement){
                    setRoll(c);
                    break;
                }
            }
        }
    };
 
    //¶óº§ onmouseover ½Ã Å¬·¡½º Àû¿ë
    function rollOver(c){
        if(c.label == null) return;
        var els = c.label.getElementsByTagName(c.labelType);
        
        if(c.labelType == "img"){
            
            for(n in els){
                if(typeof els[n] == "object"){
                    if(n == c.currentImg){
                        els[n].src = els[n].getAttribute("oversrc");
                    }else{
                        els[n].src = els[n].getAttribute("outsrc");
                    }
                }
            }
        }else{
            for(n in els){
                if(typeof els[n] == "object"){
                    if(n == c.currentImg){
                        var ocss = els[n].className;
                        els[n].className = ocss+" "+els[n].getAttribute("overcss");
                    }else{
                        els[n].className = els[n].getAttribute("outcss");
                    }
                }
            }
        }
    }
 
    //¶óº§¿¡¼­ ¼±ÅõȠÀ̹ÌÁö º¸À̱â
    function viewImg(c){
        //alert(c.currentImg);
        for(n=0; n<c.imgCnt+1; n++) {
            c.imageList[n].style.display = "none";
        }
        
        c.imageList[c.currentImg].style.left = "0px";
        c.imageList[c.currentImg].style.top = "0px";
        c.imageList[c.currentImg].style.display = "block";
    };
}
 
function debug(t){
e("dis").innerHTML = t + "<br>";
}
 
//id°ªÀ¸·Î °´Ã¼ ¹Ýȯ
function e(id){
    var o = document.getElementById(id);
    if(typeof o == undefined || o == null) { alert(id+" À̸§À» °¡Áø °´Ã¼°¡ ¾ø½À´Ï´Ù."); return null;}
 
    return o;
}
 
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,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];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
 
<body>
<ul class="ul_label" id="label_2">
    <table width="890">
  <tr>
    <td style="border:1px solid #e1e1e1" width="322" background="images/temp/top_banner1.gif">
      <li class="fir" overcss="labelOverClass" outcss="fir"></li></td>
      <td width="756" rowspan="6"><div class="image_list" id="image_list_2">
    <div class="images" style="display:block"><img src="images/temp/google.jpg" /></div>
        <div class="images"><img src="images/temp/naver.jpg" /></div>
    <div class="images"><img src="images/temp/yahoo.jpg" /></div>
    <div class="images"><img src="images/temp/daum.jpg" /></div>
    <div class="images"><img src="images/temp/nate.jpg" /></div>
    <div class="images"><img src="images/temp/banner.jpg" /></div>
</div></td>
  </tr>
  <tr>
    <td style="border:1px solid #e1e1e1" width="192" background="images/temp/top_banner2.gif"><li overcss="labelOverClass1" outcss=""></li></td>
  </tr>
  <tr>
    <td style="border:1px solid #e1e1e1" width="192" background="images/temp/top_banner3.gif"><li overcss="labelOverClass2" outcss=""></li></td>
  </tr>
  <tr>
    <td style="border:1px solid #e1e1e1" width="192" background="images/temp/top_banner4.gif"><li overcss="labelOverClass3" outcss=""></li></td>
  </tr>
  <tr>
    <td style="border:1px solid #e1e1e1" width="192" background="images/temp/top_banner5.gif"><li overcss="labelOverClass4" outcss=""></li></td>
  </tr>
  <tr>
    <td style="border:1px solid #e1e1e1" width="192" background="images/temp/top_banner6.gif"><li overcss="labelOverClass5" outcss=""></li></td>
  </tr>
</table>
</ul>
<script type="text/javascript">
<!--
var j2 = {
    "list_area":"image_list_2",
    "moveAt":"332",
    "roll_time":"3000",
    "move_time":"100",
    "direction":"up",
    "label":"label_2",
    labelType : "li"
};
new RollImage(j2);
//oj1.setRoll();
//-->
</script>
 
</body>
#그누보드5 #배너 #설정

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 48
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로