초점 사진 전환 효과는 아마도 프런트 엔드에 매우 익숙할 것입니다. 이를 구현하는 방법은 여러 가지가 있을 것입니다. 작업에서 일반적으로 사용되는 것 중 하나는 다음과 같습니다.
현재 디지털 내비게이션을 디스플레이와 동기화하는 방법. 사진?
여기에는 그림 전환 영역과 디지털 내비게이션 영역이 각각 두 개의 루프 기능에 해당합니다.
그림 루프가 두 번째 그림으로 전환되면, 이때 디지털 내비게이션의 현재 상태도 두 번째 위치로 변경되어 동기화 효과를 얻습니다. 여기서 핵심은 동일한 매개변수 값을 전달하는 것이며 이 작업은 Mea(value) 함수에 전달됩니다.
그림은 자동으로 전환되어야 하며 루프에 마지막 그림이 표시된 후 첫 번째 그림으로 돌아갑니다. 이는 auto() 함수를 사용하여 수행되지만 auto()는 매개변수 n만 판단합니다. 는 증가하고 반복되며 전원이 없으면 아무것도 할 수 없습니다.
이때 setInterval() 함수는 setInterval()과 함께 실행됩니다. auto() 매개변수 n에 따라 지속적으로 증분 변경됩니다. n은 Mea(n) 함수에 전달됩니다.
마지막 대화형 동작은 마우스를 슬라이드할 때 그림 전환 영역과 디지털 내비게이션 영역은 현재 상태를 유지하고 마우스(n) 기능을 잊지 마세요.
이렇게 여러 기능 형제가 분담하여 협력하여 각자의 임무를 수행했습니다.
1.html
코드는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다.
function $(id){return document.getElementById(id);}
var n=0
var Num=$("jfocusnum").getElementsByTagName("li"); 🎜>var imglist=$("jfocuspic").getElementsByTagName("a");
function setBg(value){//숫자 영역 전환, 현재 요소에 "on" 클래스 추가, 다른 요소의 클래스 지우기 ;
for(var i=0;i}
함수 재생( value ){//그림 영역 변환
try//try...catch는 코드의 오류를 테스트할 수 있습니다. try 섹션에는 실행해야 하는 코드가 포함되어 있고, catch 섹션에는 오류가 발생할 때 실행되는 코드가 포함되어 있습니다.
{
with (jfocuspic)//IE용 필터 효과 추가
{
filters[0].Apply();//동적 효과를 시작하기 전에 적용해야 합니다. ), Apply 이벤트는 필터 효과를 생성하는 데 사용됩니다.
for(i=0;ifilters[0].play();//play() 메서드는 동적 효과를 재생하는 데 사용됩니다. 그 전에는 #jfocus_pic 스타일
}
}
catch(e)
{
for(i=0;i{
i==value?imglist[i].style.display="block":imglist[i].style.display="none";//현재 이미지 표시, 숨기기 다른 사진
}
}
}
function mouse(n){
for(var i=0;i(function(n ){
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}//마우스가 지나간 후 자동 전환을 중지하고 함수 Mea() Pass를 제공합니다. 현재 매개변수 n
Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();}
})(i)
}
}
function Mea(값){
n=value;
setBg(값)
plays(값)
function auto(){/ / 매개변수 n의 증가는 그림 자동 회전의 핵심입니다.
if(n>Num.length-1)n=0
Mea(n)
function setAuto(){autoStart=setInterval("auto()", 2000)}//2000밀리초마다 auto() 함수가 실행될 때마다 매개변수 n이 1씩 증가합니다.
setAuto ();// 호출 기능
데모 코드:
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
