カルーセル画像の効果は、画像自体を回転させることができ、ページをめくり、画像またはタイトルの上にマウスを置くと回転します。 レンダリングは次のとおりです: コードをコピー コードは次のとおりです: 带左右箭头图片轮播<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>function 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>/ /-->gt;<!]]><br>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
