회전식 이미지의 효과는 아래 그림과 같습니다. 이미지는 왼쪽 및 오른쪽 버튼을 클릭하여 페이지를 넘길 수 있으며 회전식 이미지나 제목 위에 마우스를 올리면 회전식 회전이 중지됩니다. 렌더링은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. 带左右箭头图片轮播<br><!--<BR>.rollBox{width:770px;height:260px;overflow:hidden;padding:10px;margin:0 auto;border:1px solid red;}<BR>.rollBox .LeftBotton{height:40px;width:21px;background:url(images/sl.png) no-repeat 0px 5px;overflow:hidden;float:left;display:inline;margin:110px 0 0 0;cursor:pointer;}<BR>.rollBox .RightBotton{height:40px;width:21px;background:url(images/sr.png) no-repeat 0px 5px;overflow:hidden;float:left;display:inline;margin:110px 0 0 0;cursor:pointer;}<BR>.rollBox .Cont{width:726px;overflow:hidden;float:left;}<BR>.rollBox .ScrCont{width:10000000px;}<BR>.rollBox .Cont .pic{width:242px;float:left;text-align:center;}<BR>.rollBox .Cont .pic img{padding:9px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;width:190px;height:190px;}<BR>.rollBox .Cont .pic div{line-height:20px;color:#505050;margin:15px 0px;}<BR>.rollBox .Cont .pic div span{display:block;}<BR>.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}<BR>.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}<BR>.rollBox #List1,.rollBox #List2{float:left;}<BR>--><br> 酷站代码-特效1 45446547 酷站代码-特效1 45446547 酷站代码-特效1 45446547 酷站代码-特效1 45446547 酷站代码-特效1 45446547 酷站代码-特效1 45446547 酷站代码-特效1 45446547 酷站代码-特效1 45446547 <br><!--//--><![CDATA[/ /><!--<BR>//그림 스크롤 목록 jb51.net<BR>var Speed = 1; //속도 (밀리초)<BR>var Space = 5; px)<BR>var PageWidth = 726; //페이지 넘김 폭<BR>var fill = 0; //전체 이동<BR>var MoveLock = false;<BR>var MoveTimeObj;<BR>var Comp = 0;<BR> var AutoPlayObj = null;<BR>GetObj("List2").innerHTML = GetObj("List1").innerHTML;<BR>GetObj('ISL_Cont').scrollLeft = fill;<BR>GetObj("ISL_Cont" ).onmouseover = function(){clearInterval(AutoPlayObj);}<BR>GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}<BR>AutoPlay();<BR>function GetObj(objName) {if (document.getElementById){return eval('document.getElementById("' objName '")')}else{return eval('document.all.' objName)}}<BR>function AutoPlay(){ // 자동 스크롤 <BR>clearInterval(AutoPlayObj);<BR> AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //간격 시간<BR>}<BR>function ISL_GoUp(){ //시작 뒤집기 <BR> if(MoveLock) return;<BR>clearInterval(AutoPlayObj);<BR> MoveLock = true;<BR> MoveTimeObj = setInterval('ISL_ScrUp();',Speed);<BR>}<BR> function ISL_StopUp (){ //스크롤 중지<BR>clearInterval(MoveTimeObj);<BR> if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){<BR> Comp = fill - (GetObj(' ISL_Cont') ').scrollLeft % PageWidth);<BR> CompScr();<BR> }else{<BR> MoveLock = false;<BR> }<BR> AutoPlay();<BR>}<BR>함수 ISL_ScrUp() { //스크롤 업 작업<BR> if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft GetObj('List1' ).offsetWidth }<BR> GetObj('ISL_Cont').scrollLeft -= Space ;<BR>}<BR>function ISL_GoDown(){ //아래로 스크롤<BR>clearInterval(MoveTimeObj);<BR> if(MoveLock) return;<BR>clearInterval(AutoPlayObj);<BR> MoveLock = true;<BR> ISL_ScrDown();<BR> MoveTimeObj = setInterval('ISL_ScrDown()',Speed);<BR>}<BR>함수 ISL_StopDown( ){ / /아래로 스크롤하여 중지<BR>clearInterval(MoveTimeObj);<BR> if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){<BR> Comp = PageWidth - GetObj('ISL_Cont' ).scrollLeft % PageWidth fill;<BR> CompScr();<BR> }else{<BR> MoveLock = false;<BR> }<BR> AutoPlay();<BR>}<BR>function ISL_ScrDown(){ //작업 중지<BR> if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj ('List1' ).scrollWidth;}<br> GetObj('ISL_Cont').scrollLeft = Space ;<br>}<br>function CompScr(){<br> var num;<br> if(Comp == 0 ){MoveLock = false;return;}<br> if(Comp if(Comp Comp = Space;<br> num = Space; <br> } else{<br> num = -Comp;<br> Comp = 0;<br> }<br> GetObj('ISL_Cont').scrollLeft -= num;<br> setTimeout('CompScr()' ,Speed); <br> }else{ //꺼짐<br> if(Comp > Space){<br> Comp -= Space;<br> num = Space;<br> }else{<br> num = Comp;<br> Comp = 0;<br> }<br> GetObj('ISL_Cont').scrollLeft = num;<br> setTimeout('CompScr()',Speed);<br> }<br>} <br>/ /--><!]]><br>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
