js jquery_jquery로 만든 그림의 연속 스크롤 코드

핵심 코드는 다음과 같습니다.

코드 복사를 참조하세요. 코드는 다음과 같습니다

<script><br>$(document).ready(function(){ <br> <br> $(".bannerbutton li").each( <br> function(){ <br> $(this).click( <br> function(){ <br> "num")); )                                                                                                         () ); <br>}); <br>var active=1;//현재 첫 번째 사진 표시 중 <br>var picNum=4;//사진 4장 변환 중 <br>var time=500;//이동 속도 <br>var intTime=3000; //자동 변환 간격 <br>var width=568; //그림 너비 <br>var perDistance=57; //각 이동 거리 <br>var tagObj=0; <br>var marquee; <br>var distance; <br>var tmpDistance=0; <br>var tagLeft=0; <br> 함수 배너고(태그) {<br> if (active! = 태그) {<br> if (! Move) {<br> listleft = PARSEINT ($ (". Banner ul .img").css(" left")); <br> distance=(tag-active)*width; <br> tmpDistance=0; <br> perTime=parseInt(time*perDistance/distance); <br> if(tag>active){ stance; <br> marquee=setInterval("Marquee(0)",perTime) <br>                                                                         활성=1;  <br><br>함수 Marquee(t){  <br>       var x=false;  <br>       if(t==0){  <br>              listLeft=listLeft perDistance;  <br>             if((tagLeft-listLeft)>=perDistance){  <br>                   $(".banner ul.img").css("left",listLeft "px");  <br>             }else{  <br>                   $(".banner ul.img").css("left",tagLeft "px");  <br>                     x=true;  <br>             }  <br>       }else{  <br>             listLeft=listLeft-perDistance;  <br>             if((tagLeft-listLeft)<=perDistance){  <br>                   $(".banner ul.img").css("left",listLeft "px");  <br>             }else{  <br>                   $(".banner ul.img").css("left",tagLeft "px");  <br>                     x=true;  <br>             }  <br>       }  <br>       if(x){  <br>             clearInterval(marquee);  <br>              tmpDistance=0;  <br>              listLeft=0;  <br>              tagLeft=0;  <br>              이동=false;  <br>              $(".bannerbutton li").css("배경","url(/images/index/b2.gif) 반복 없음");  <br>             $(".bannerbutton li[@num=" active "]").css("배경","url(/images/index/b1.gif) 반복 없음");  <br>             if(tagObj==picNum 1){  <br>             $(".banner ul.img").css("left","0");  <br>              활성=1;  <br>             }  <br>       }  <br>}  <br><br>function autoMarquee(){  <br>       tagObj=Number(active) 1;  <br>       bannerGo(tagObj);  <br>}  <br><br>function autoMarqueeStart(){  <br>       if(!move){  <br>       marquee=setInterval("autoMarquee()",intTime)  <br>       }else{  <br>       setTimeout( "autoMarqueeStart()",시간);  <br>       }  <br><br>}  <br>autoMarqueeStart();  <br></script> 
<스타일> 
*{margin:0;padding:0;border:0} 
li{float:left;} 
ul{list-style-type:none;} 
.banner{height:228px ;너비:568px;오버플로:숨김;} 
.bannerbutton li{ 
       너비:23px; 
       높이:22px; 
       배경:url(/images/index/b2.gif) 반복 없음; 
       커서:포인터; 
       줄 높이:22px; 
       text-align: center; 
       색상: #fff; 
       font-weight: bold; 
} 
.banner .img li{float:left;} 
.banner .img { 
       위치: relative;width:5600px; 
} 
body,td,th { 
       글꼴 크기: 12px; 
} 
본문 { 
       여백-왼쪽: 0px; 
       여백 상단: 0px; 
       오른쪽 여백: 0px; 
       여백-하단: 0px; 
} 
 
 
         
                                1 
                                 2 
                                 3 
                                 4