실용적인 js 포커스 맵 전환 효과, 구조 분리 및behavior_javascript 기술

초점 사진 전환 효과는 아마도 프런트 엔드에 매우 익숙할 것입니다. 이를 구현하는 방법은 여러 가지가 있을 것입니다. 작업에서 일반적으로 사용되는 것 중 하나는 다음과 같습니다.
현재 디지털 내비게이션을 디스플레이와 동기화하는 방법. 사진?
여기에는 그림 전환 영역과 디지털 내비게이션 영역이 각각 두 개의 루프 기능에 해당합니다.
그림 루프가 두 번째 그림으로 전환되면, 이때 디지털 내비게이션의 현재 상태도 두 번째 위치로 변경되어 동기화 효과를 얻습니다. 여기서 핵심은 동일한 매개변수 값을 전달하는 것이며 이 작업은 Mea(value) 함수에 전달됩니다.
그림은 자동으로 전환되어야 하며 루프에 마지막 그림이 표시된 후 첫 번째 그림으로 돌아갑니다. 이는 auto() 함수를 사용하여 수행되지만 auto()는 매개변수 n만 판단합니다. 는 증가하고 반복되며 전원이 없으면 아무것도 할 수 없습니다.
이때 setInterval() 함수는 setInterval()과 함께 실행됩니다. auto() 매개변수 n에 따라 지속적으로 증분 변경됩니다. n은 Mea(n) 함수에 전달됩니다.
마지막 대화형 동작은 마우스를 슬라이드할 때 그림 전환 영역과 디지털 내비게이션 영역은 현재 상태를 유지하고 마우스(n) 기능을 잊지 마세요.
이렇게 여러 기능 형제가 분담하여 협력하여 각자의 임무를 수행했습니다.
1.html

코드 복사 코드는 다음과 같습니다.

<div class="jfocus">
<div id="jfocuspic">
<a href="#" style="display:block;">사진 1< /a>
<a href="#">사진 2>
&lt ;a href="#">사진 3
<a href=" #">그림 4</a>
</div>
<ul id="jfocusnum">
<li class="on">1</li>
<li>2</li>
<li>4</li>
</div> ; >
코드 복사

코드는 다음과 같습니다.

.jfocus{width:300px;height:300px;border:#ccc 1px solid; background -color:# FFF;} #jfocuspic{FILTER: progid:DXImageTransform.Microsoft.Fade (duration=0.5,overlap=1.0 );width:300px;height:200px;overflow:hidden;} #jfocuspic a{디스플레이: 없음; 글꼴 크기:200px; 글꼴-색상:#CCC; 커서:포인터; jfocusnum li{cursor:pointer;height:50px; line-height:50px;display:inline-block; border:#999 1px text-align:center; CCC; 왼쪽; 여백:0 5px;} #jfocusnum li.on{color:#f00; border:#900 1px solid; 🎜> 3.js

코드 복사


코드는 다음과 같습니다.

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<Num.length;i ) Num[i].className=(value==i)?"on":""
}
함수 재생( value ){//그림 영역 변환
try//try...catch는 코드의 오류를 테스트할 수 있습니다. try 섹션에는 실행해야 하는 코드가 포함되어 있고, catch 섹션에는 오류가 발생할 때 실행되는 코드가 포함되어 있습니다.
{
with (jfocuspic)//IE용 필터 효과 추가
{
filters[0].Apply();//동적 효과를 시작하기 전에 적용해야 합니다. ), Apply 이벤트는 필터 효과를 생성하는 데 사용됩니다.
for(i=0;i<Num.length;i )i==value?children[i].style.display="block":children[i].style.display="none"; >filters[0].play();//play() 메서드는 동적 효과를 재생하는 데 사용됩니다. 그 전에는 #jfocus_pic 스타일
}
}
catch(e)
{
for(i=0;i<Num . length;i )
{
i==value?imglist[i].style.display="block":imglist[i].style.display="none";//현재 이미지 표시, 숨기기 다른 사진
}
}
}
function mouse(n){
for(var i=0;i<Num.length;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 ();// 호출 기능


데모 코드:

<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--><p>사진 1<meta content="text/html; charset=gb2312"> </p>사진 2<style type="text/css"><!-- .jfocus{width:300px;height:300px;border:#ccc 1px solid;background-color:#FFF;} #jfocuspic{FILTER: progid:DXImageTransform.Microsoft.Fade (duration=0.5,overlap=1.0 );width:300px;height:200px;overflow:hidden;margin-bottom:20px;} #jfocuspic a{display:none; font-size:2em; text-align:center; line-height:200px; font-weight:bold; background-color:#CCC; height:200px; cursor:pointer;} #jfocusnum li{cursor:pointer;height:50px; width:50px; line-height:50px;display:inline-block; color:#000; border:#999 1px solid; text-align:center; background-color:#CCC; float:left; margin:0 5px;} #jfocusnum li.on{color:#f00; font-weight:bold; border:#900 1px solid; font-size:14px;} --></style> <div class="jfocus">사진 3<div id="jfocuspic"> <a href="#" style="display: block;">사진 4</a> <a href="#"> </a> <a href="#">1</a> <a href="#">2</a> </div>3<ul id="jfocusnum"> <li class="on">4</li> <li> </li> <li> <li> </li> </ul>[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. <br>]<input onclick="runEx('runcode10313')" type="button" value="运行代码"> <input onclick="doCopy('runcode10313')" type="button" value="复制代码"> 비헤이비어 레이어는 js로 구성됩니다. 이를 달성하기 위해 여기서 작업은 단순한 뼈대를 만드는 것뿐입니다. 렌더링을 더 아름답게 만들고 디자인 요구 사항을 충족하려면 CSS의 강력한 역할을 사용해야 합니다. <input onclick="doSave(runcode10313)" type="button" value="保存代码">js를 컴파일한 후에는 다음에 다시 사용할 수 있지만 CSS를 작성할 때 운이 좋지 않습니다. 매번 디자이너가 다른 스타일의 외관을 만들 수 있으므로 CSS 코드를 다시 작성하고 구현해야 합니다. css 정확한 위치를 지정하고 좋은 호환성을 유지하는 것뿐만 아니라 최적화를 극대화하는 것은 실제로 간단한 문제가 아닙니다.</div>