시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > JAVASCRIPT > javascript 소스창고 > 이미지관련 > 쇼핑몰 상품롤링 상세정보
사이트등록
클라우드태그
javascript
php
CSS
html
ASP
API
jquery
mysql
image
mobile
slide
게시판
메뉴
현재접속자 22 새로고침
쇼핑몰 상품롤링
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 네이버로공유
소스분류 이미지관련
다운로드 횟수 2364 회
간단설명 쇼핑몰배너형 관련 자바스크립트입니다.
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
소스다운로드 데모 미리보기 스크랩하기

<script language="Javascript">

 

            /******************************************************************************
            * 만든목적: JS 롤링;
            * 만든이:허웅 [comefeel];
            * 제작시간:총 7~8시간;
            * JS 경력:현재 6개월차 -..-; 초허접;
            * last update:2007.01
            * igear.co.kr 도와준분 [zeldign] 플머 12년차;
            * e-mail : igearmall.co.kr <
comefeel@daum.net> <a href=mailto:comefeel@comefeel.com>comefeel@comefeel.com</a> 도 있지만 현재 안됨 ;
            * 이것을 사용할려고 할시에 주석을 지우면 사용할수 없음;
            * 허접한 소스를 보고 -_-+ 머라고 하면 쫏아감;
            * **
            */

            var roll_Class=function(){this.initialize.apply(this,arguments);}
            roll_Class.prototype={

            initialize:function(){

            this.className=arguments[0]?arguments[0]:null;
            this.foundit(arguments[1],'',false);
            this.contents=new Array('0');
            this.contents_delay=null;
            this.nowdelay=null;
            this.foundit(
            this.roll.childNodes,this.foundvalue ,
            function(rt,that){

            if(that.constrain_size !== null) that.foundit(rt.childNodes,'IMG',function(rt,that){rt.style[(this.moving != 'left' ? 'width' : 'height')] = that.constrain_size;});
            that.contents_delay=that.contents[that.contents.length]=that.contents_delay+-rt[(that.moving=='left'?'offsetWidth':'offsetHeight')];});

            {
            this.rollHeight=this.proll.style[(this.moving=='left'?'width':'height')]=Math.abs(this.contents[this.contents.length-1]);
            this.roll.appendChild(this.roll.cloneNode(true));
            };},


            foundit:function(tg,n){

            var temp=new Array();

                for(var v in tg)
                    switch(typeof arguments[2]){
                    case 'object':if(arguments[2].initialize(tg[v],n,this)==true) return; else break;
                    case 'function':if(tg[v].nodeName==n) arguments[2](tg[v],this); break;
                    case 'boolean':this[v]=tg[v]; break;
                    default:if(tg[v].nodeName==n) return tg[v];
                }

            return temp;},

            inaction:function(time){

            this.roll.style[this.moving]=time=time < 0 ?(this.fall==false && time <= -this.rollHeight?0:time):-this.rollHeight,null;
            this.foundit(this.contents,time,{initialize:function(rt,vrt,that){if(Math.abs(rt - vrt) <(that.fast==false?that.tick:that.ftick)){that.roll.style[that.moving]=rt; that.nowdelay=that.fast==true?that.lengthen:that.delay; that.fast=false; return true;} else that.nowdelay=that.lengthen;}});
            {var ticks=this.fast==true?this.ftick:this.tick;}
            this.control=setTimeout(this.className+".inaction("+(parseInt(this.roll.style[this.moving])+(this.fall==true?ticks:-ticks))+");",this.nowdelay);},

            stop:function(){

            this.temp=parseInt(this.roll.style[this.moving]);
            clearTimeout(this.control);}    };

    </script>
    <!-- 가로롤링 셈플 -->

 

    <table>
        <tr>

            <td width="3" height="123" background="./img/move_left.gif" style="padding:0px 0px 0px 12px;cursor:pointer" style="cursor:pointer"  onclick="width_class.fall=false;width_class.fast=true;"></td>
            <td>

            <div id="parent_rolltable" name="parent_rolltable" style="border-width:1px; border-color:black; border-style:solid; overflow:hidden;" onmouseover="width_class.stop();" onmouseout="width_class.inaction(width_class.temp);">
                <nobr id="rolltable" name="rolltable" style="position:relative;"><span><img src="./img/banner_sample01.jpg"></span><span><img src="./img/banner_sample02.jpg"></span><span><img src="./img/banner_sample03.jpg"></span><span><img src="./img/banner_sample04.jpg"></span><span><img src="./img/banner_sample05.jpg"></span></nobr>
            </div>


            </td><td width="3" height="123" background="./img/move_right.gif" style="padding:0px 0px 0px 12px;cursor:pointer"  onclick="width_class.fall=true;width_class.fast=true;"></td>
            </td>
        </tr>
    </table>

 


    <br />


    <!-- 세로롤링 셈플 -->

    <table border="0" cellpadding="0" cellspacing="0">

            <tr>
                <td align="center"><img src="./img/bt_ps_today.gif" width="80" height="27" alt="" style="cursor:pointer"  onclick="height_class.fall=false;height_class.fast=true;"/></td>
            </tr>

            <tr>
                <td align="center">
                    <img src="./img/bt_ps_prev.gif" width="25" height="8" alt="" style="cursor:pointer"  onclick="height_class.fall=false;height_class.fast=true;" />
                </td>
            </tr>

            <tr>
                <td>

                    <div id="parent_rolltable1" name="parent_rolltable1" style="border-width:1px; border-color:white; border-style:solid; overflow:hidden;text-overflow:ellipsis;" onmouseover="height_class.stop();" onmouseout="height_class.inaction(height_class.temp);">
                        <nobr  id="rolltable1" name="rolltable1" style="position:relative;">

 

                                <div style="text-align:center; padding-bottom:5px;">
                                    <img src="./img/sign.gif" border="0">
                                </div>
                                <div style="text-align:center; padding-bottom:5px;">
                                    <img src="./img/card.gif" border="0">
                                </div>
                                <div style="text-align:center; padding-bottom:5px;">
                                    <img src="./img/10persale_scbanner.gif" border="0">
                                </div>
                                <div style="text-align:center; padding-bottom:5px;">
                                    <img src="./img/afterboard_scbanner.gif" border="0">
                                </div>
                                <div style="text-align:center; padding-bottom:5px;">
                                    <img src="./img/100perguide_scbanner.gif" border="0">
                                </div>


                        </nobr>
                    </div>


                </td>
            </tr>

            <tr>
                <td align="center">
                    <img src="./img/bt_ps_next.gif" width="25" height="8" alt="" style="cursor:pointer"  onclick="height_class.fall=true;height_class.fast=true;" />
                </td>
            </tr>
            <tr>
                <td height="20" align="center" valign="middle" bgcolor="#75BD2F" style="cursor:pointer"  onclick="height_class.fall=true;height_class.fast=true;">

                </td>
            </tr>
            <tr>
                <td align="center"><img src="./img/img_ps_bottom.gif" width="85" height="5" alt=""  /></td>
            </tr>
          </table>

 

 


        <!-- 디버그

        <table>
        <tr>
        <td>
        <iframe id="scv" name="scv" width="700" height="1000"></iframe>
        </td>
        </tr>
        </table>-->

        <script language="Javascript">

            {

                // 가로롤링 설정키
                var roll_init=new Array();
                roll_init.constrain_size=null;                            // 전체의 높이값 [기본 default]
                roll_init.tick=1;                                                    // 움직이는 칸수
                roll_init.ftick=10;                                                // 빠른 움직이는 칸수
                roll_init.lengthen=10;                                        // 1초당 움직이는 속도
                roll_init.delay=1000;                                            // 잠시멈춤 속도
                roll_init.fall=true;                                                // 이동 반대로 설정 ~
                roll_init.fast=false;                                            // 빠른속도:true 는 on 이며,false 는 off 이다.
                roll_init.foundvalue =    'SPAN';                                // Nobr 내부엘리멘트
                roll_init.moving='left';                                         // 상하좌우 움직임 설정
                roll_init.roll=document.getElementById('rolltable');                                        // roll
                roll_init.proll=document.getElementById('parent_rolltable');                            // proll

            };

            {

                // 가롤롤링 선언부분

                var width_class=new roll_Class('width_class',roll_init);
                width_class.inaction();

            };


            {

                // 세로롤링 설정키
                var roll_init1=new Array();
                roll_init1.constrain_size=null;                            // 전체의 넓이값 [기본 default]
                roll_init1.tick=1;                                                    // 움직이는 칸수
                roll_init1.ftick=10;                                                // 빠른 움직이는 칸수
                roll_init1.lengthen=10;                                        // 1초당 움직이는 속도
                roll_init1.delay=1000;                                            // 잠시멈춤 속도
                roll_init1.fall=true;                                                // 이동 반대로 설정 ~
                roll_init1.fast=false;                                            // 빠른속도:true 는 on 이며,false 는 off 이다.
                roll_init1.foundvalue =    'DIV';                                // Nobr 내부엘리멘트
                roll_init1.moving='top';                                         // 상하좌우 움직임 설정
                roll_init1.roll=document.getElementById('rolltable1');                                        // roll
                roll_init1.proll=document.getElementById('parent_rolltable1');                            // proll
            };

            {

                // 세로롤링 선언부분
                var height_class=new roll_Class('height_class',roll_init1);
                height_class.inaction();

            };

        </script>

 

    </body>
    </html>


네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
도배방지키
 57491714 보이는 도배방지키를 입력하세요.