구현 아이디어:
1. for 루프는 숫자 버튼에 클릭 이벤트를 추가합니다.
2. for 루프는 먼저 버튼의 스타일을 지운 다음 현재 스타일을 설정합니다.
3. 각 버튼에 사용자 정의 속성 인덱스 aBtn[i].index=i aBtn[2]=2를 추가합니다. 두 번째 버튼이 두 번째 그림에 해당하도록 하려면 모션 프레임을 사용하여 UL을 변경합니다. 이미지 높이가 150px이므로 매번 큰 그림을 -150px로 이동하세요. n번째 사진으로 이동하면 -150*n이 됩니다.
4. 이제 자동 재생을 위한 변수를 정의하세요. 현재 이미지를 now=this.index에 할당합니다.
5. 자동 재생 기능을 정의합니다. 이제 다음 사진으로 판단하면 마지막 사진에 도달하면 이제 첫 번째 사진인 0으로 설정합니다. if(현재==aBtn.length)
6. 타이머를 정의하고 2초마다 자동 재생 기능을 호출합니다.
7. 마우스가 사진을 가리키면 타이머가 지워집니다.
8. 마우스가 사진을 떠나면 타이머가 시작됩니다.
<script><br>창. onload=function ()<br> {<br> var oDiv=document.getElementById('play');<br> var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');<br> var oUl=oDiv.getElementsByTagName('ul')[0];<br> var now=0;<br><br> for(var i=0;i<aBtn.length;i )<BR> { <BR> aBtn[i].index=i;<BR> aBtn[i].onmouseover=function()<BR> {<BR> now=this.index; //현재 값이 now에 할당됩니다<BR> tab();<BR> }<BR> };<br><br> function tab()<BR> { for(var i=0;i<aBtn.length;i) <BR> {<BR> aBtn [i ; -150*now}); //모션 프레임워크를 사용하여 UL의 TOP를 현재 숫자*-150으로 설정합니다. 세 번째 그림은 2*-150<BR> };<BR><BR> function next( )<BR> 원피스<BR> }<br> tab(); //그림을 다시 첫 번째 그림으로 끌어오고 계속 이동<br> };<BR><BR> var 타이머=setInterval(next,2000) ; //2초 자동으로 사진 전환<BR><BR> oDiv.onmouseover=function()<BR> {<BR>clearInterval(timer); //타이머 지우기<BR><BR> oDiv. onmouseout=함수( ;
<br>전체 코드:<br><br><br><BR><BR>코드 복사<BR><br><br> 코드는 다음과 같습니다.<BR><div class="codebody" id="code52143"><BR><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" 콘텐츠 ="text/html; charset=utf-8" /><br> <title>淘宝幻灯 Images上下滑动效果 —— www.zhinengshe.com —— 智能课堂</title><br> <link href="css.css" rel="stylesheet" type="text/css" /><br> <script src="baseCommon.js"></script>
<script><br> window.onload=function()<br> {<br> var oDiv=document.getElementById('play');<br> var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li ');<br> var oUl=oDiv.getElementsByTagName('ul')[0];<br> var now=0;<br><br> for(var i=0;i<aBtn.length;i ) <br> {<br> aBtn[i].index=i;<br> aBtn[i].onmouseover=function()<br> {<br> now=this.index; //지금 실행하세요<br> tab();<br> }<br> };<br><br> function tab()<br> { <br> for(var i=0;i& lt;aBtn .length;i ) <br> {<br> aBtn[i].className=''; //把所有按钮的样式清공간<br> };<br> aBtn[now].className='active'; //当前按钮样式设置<br> startMove(oUl,{top:-150*now}); //사용 가능한 TOP设置为当前个数*-150, 第三张图 Pictures就是2*-150<br> };<br><br> 함수 next()<br> {<br> 지금 ; //切换图文<br> if(now==aBtn.length) //如果到了最后一张图文<br> {<br> now=0; // 把图文拉回第一张<br> }<br> tab(); //把图文拉回第一张后继续运动<br> };<br><br> var 타이머=setInterval(next,2000); //2개 자동 생성<br><br> oDiv.onmouseover=function()<br> {<br> clearInterval(timer); //清除定时器<br> };<br><br> oDiv.onmouseout=function()<br> {<br> 타이머=setInterval(next,2000); //开启정정时器<br> };<br> };<br> </script>
< /html>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
