타오바오 슬라이드쇼 효과_자바스크립트 기술의 JS 구현 방법
구현 아이디어:
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>
- 1
- 2
- 3
- 4
- 5
< /html>
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7569
15
1386
52
87
11
61
19
28
107
사용자에게 드문 결함 발생: Samsung Watch 스마트워치에서 갑자기 흰색 화면 문제가 발생함
Apr 03, 2024 am 08:13 AM
스마트폰 화면에 녹색 줄이 나타나는 문제를 겪어보셨을 텐데요. 한 번도 본 적이 없더라도 인터넷에서 관련 사진을 본 적이 있을 것입니다. 그렇다면 스마트워치 화면이 하얗게 변하는 상황을 겪어보신 적 있으신가요? CNMO는 지난 4월 2일 외신을 통해 한 Reddit 사용자가 소셜 플랫폼에 삼성 워치 시리즈 스마트워치 화면이 하얗게 변하는 사진을 공유했다는 사실을 접했습니다. 해당 이용자는 "떠날 때 충전 중이었는데, 돌아올 때 이랬다. 재시작을 하려고 했는데, 삼성워치 스마트워치 화면이 하얗게 변했다"고 적었다. Reddit 사용자가 특정 모델을 지정하지 않았습니다. 하지만 사진으로 보면 삼성 워치5가 될 것 같습니다. 이전에 다른 Reddit 사용자도 보고했습니다.
PPT 슬라이드에 칠각형을 삽입하는 방법 소개
Mar 26, 2024 pm 07:46 PM
1. PPT 슬라이드 문서를 열고, PPT 왼쪽의 [개요, 슬라이드] 열에서 기본 [도형]을 삽입할 슬라이드를 클릭하여 선택하세요. 2. 선택 후 PPT 상단 기능 메뉴바에서 [삽입] 메뉴를 선택하고 클릭합니다. 3. [삽입] 메뉴를 클릭하면, 기능 메뉴바 아래에 [삽입] 하위 메뉴바가 팝업됩니다. [삽입] 하위 메뉴바에서 [도형] 메뉴를 선택하세요. 4. [모양] 메뉴를 클릭하면 미리 설정된 모양 유형 선택 페이지가 팝업됩니다. 5. 도형 종류 선택 페이지에서 [칠각형] 도형을 선택하고 클릭하세요. 6. 클릭 후 슬라이드 편집 인터페이스로 마우스를 이동하고 마우스를 눌러 그림을 그리고 그리기가 완료되면 마우스를 놓습니다. [칠각형] 도형 삽입을 완료합니다.
권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트
Apr 03, 2024 am 11:55 AM
얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.
Kyushu Fengshen Assassin 4S 라디에이터 리뷰 공냉식 'Assassin Master' 스타일
Mar 28, 2024 am 11:11 AM
ASSASSIN이라고 하면, 플레이어들은 확실히 "Assassin's Creed"에 나오는 암살의 대가들을 떠올릴 것이라고 생각합니다. 그들은 숙련될 뿐만 아니라 "어둠에 헌신하고 빛을 섬기는" 신념을 가지고 있습니다. 국내에서 잘 알려진 섀시/전원 공급 장치/냉각 가전 브랜드 DeepCool의 ASSASSIN 플래그십 공냉식 라디에이터 시리즈는 서로 일치합니다. 최근 이 시리즈의 최신 제품인 ASSASSIN4S가 출시되었습니다. "Assassin in Suit, Advanced"는 고급 플레이어에게 새로운 공냉식 경험을 선사합니다. 외관은 디테일이 가득합니다. Assassin 4S 라디에이터는 이중 타워 구조 + 단일 팬 내장 디자인을 채택했으며, 외부는 큐브 모양의 페어링으로 덮여 있어 전체적으로 강렬한 느낌을 줍니다. 다양한 컬러를 만나보세요.
주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요.
Dec 17, 2023 pm 06:55 PM
주식 분석을 위한 필수 도구: PHP 및 JS에서 캔들 차트를 그리는 단계를 배우십시오. 인터넷과 기술의 급속한 발전으로 주식 거래는 많은 투자자에게 중요한 방법 중 하나가 되었습니다. 주식분석은 투자자의 의사결정에 있어 중요한 부분이며 캔들차트는 기술적 분석에 널리 사용됩니다. PHP와 JS를 사용하여 캔들 차트를 그리는 방법을 배우면 투자자가 더 나은 결정을 내리는 데 도움이 되는 보다 직관적인 정보를 얻을 수 있습니다. 캔들스틱 차트는 주가를 캔들스틱 형태로 표시하는 기술 차트입니다. 주가를 보여주네요
PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법
Dec 17, 2023 am 08:08 AM
PHP와 JS를 사용하여 주식 캔들 차트를 만드는 방법 주식 캔들 차트는 주식 시장에서 흔히 사용되는 기술 분석 그래픽으로 시가, 종가, 최고가 등의 데이터를 그려서 투자자가 주식을 보다 직관적으로 이해할 수 있도록 도와줍니다. 주식의 최저 가격. 이 기사에서는 특정 코드 예제와 함께 PHP 및 JS를 사용하여 주식 캔들 차트를 만드는 방법을 설명합니다. 1. 준비 시작하기 전에 다음 환경을 준비해야 합니다. 1. PHP를 실행하는 서버 2. HTML5 및 Canvas를 지원하는 브라우저 3
봄의 절묘한 빛과 그림자 예술, Haqu H2는 비용 효율적인 선택입니다.
Apr 17, 2024 pm 05:07 PM
봄이 오면 모든 것이 되살아나고 모든 것이 활력과 활력으로 가득 차 있습니다. 이 아름다운 계절에 가정 생활에 색상을 추가하는 방법은 무엇입니까? 정교한 디자인과 뛰어난 비용 효율성을 갖춘 Haqu H2 프로젝터는 올 봄에 없어서는 안 될 아름다움이 되었습니다. 이 H2 프로젝터는 콤팩트하면서도 스타일리시합니다. 거실 TV장 위에 놓거나 침실 침대협탁 옆에 놓아도 아름다운 풍경이 될 수 있습니다. 본체는 유백색 무광택 질감으로 만들어져 있어 프로젝터가 더욱 고급스러워 보일 뿐만 아니라 촉감의 편안함도 향상됩니다. 베이지색 가죽 느낌의 소재가 전체적인 외관에 따뜻함과 우아함을 더해줍니다. 이러한 색상과 소재의 조합은 현대 주택의 미적 트렌드에 부합할 뿐만 아니라 다음과 같은 인테리어에도 통합될 수 있습니다.
Huntkey MX750P 전체 모듈 전원 공급 장치 검토: 750W의 집중된 백금 강도
Mar 28, 2024 pm 03:20 PM
ITX 플랫폼은 컴팩트한 크기로 궁극적이고 독특한 아름다움을 추구하는 많은 플레이어를 끌어 모았습니다. 제조 공정의 개선과 기술 발전으로 Intel의 14세대 Core와 RTX40 시리즈 그래픽 카드 모두 ITX 플랫폼에서 강점을 발휘할 수 있으며, 게이머 또한 SFX 전원 공급 장치에 대한 요구 사항이 더 높습니다. 게임 매니아인 Huntkey는 고성능 요구 사항을 충족하는 ITX 플랫폼에서 새로운 MX 시리즈 전원 공급 장치를 출시했습니다. MX750P 풀 모듈 전원 공급 장치는 최대 750W의 정격 전력을 가지며 80PLUS 플래티넘 레벨 인증을 통과했습니다. 아래에서는 이 전원 공급 장치에 대한 평가를 가져옵니다. Huntkey MX750P 풀 모듈 전원 공급 장치는 심플하고 패셔너블한 디자인 컨셉을 채택하고 있으며 플레이어가 선택할 수 있는 두 가지 흑백 모델이 있습니다. 둘 다 무광택 표면 처리를 사용하고 은회색과 빨간색 글꼴로 질감이 좋습니다.
