JS 이미지 검색 구성 요소 PhotoLook_Image 특수 효과의 공개 속성 메서드 및 고급 예제 코드 소개

속성
speed: 이미지 전환 속도 설정
width: 구성 요소의 너비
height: 구성 요소의 높이
cellStructures: 효과의 행과 열 예를 들어, {row:8, col:8｝이 행과 열은 효과 매트릭스 switchTable
Method
init( ): 초기화
addswitchTable(switchTable): 효과 매트릭스 추가
add( url): 이미지 추가
addswitchMethod(func, type): 전환 방법(예: 페이드 아웃, 슬라이드 아웃) 추가, 기능은 다음과 같습니다. 현재 완료되지 않았습니다. 유형은 "show" 값 하나만 채울 수 있습니다.
autoPlay (time): 자동 재생, 자동 재생 속도는 속도보다 낮지 않습니다.
stopAutoPlay(): 자동 재생 중지
goTo(): ​​​​특정 사진으로 이동합니다. 자동 재생이 아닌 상태여야 합니다.
previous(): Previous Page
next(): Next page

예시와 비교해보세요. 이전 예(JS 이미지 탐색 구성 요소 소개)에서 이 예는 cellStructures를 사용하여 기본 행렬의 행과 열을 변경하고 이미지 전환 개수(1, 2, 3, 4, 5, 6, GO)를 표시합니다.
이번 설정 코드

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

var pola=new PhotoLook("contain");//PhotoLook 객체 생성
/*PhotoLook 크기 설정*/
pola.width=240
pola.height=320
pola.cellStructures=[{row :8,col:8}];
/*사진 추가*/
pola.add("http://img.overpic.net/thumbs/c/h/s/xchsypp84zbzof3ofu_s.jpg");
pola.add("http://img.overpic.net/thumbs/c/4/8/xc48uw6026mq5kuk2jzxg_s.jpg" )
pola.add("http://img.overpic.net/ Thumbs/s/3/z/xs3zwhazx5db43ux8npmf_s.jpg");
pola.add("http://img.overpic.net/thumbs/l/n/u/xlnunh3z65oz4de4y5qs_s.jpg");
pola .add("http://img.overpic.net/thumbs/s/z/p/xszpf2cqu4la46wvve9n_s.jpg")
pola.add("http://img.overpic.net/thumbs/7/ q/k/x7qk2am7qzgyi5s03bdxi_s.jpg");
pola.init();
/*페이드 아웃 효과, 효과를 사용자 정의할 수 있습니다. 직접 추가하세요. 이것은 단지 고전적인 효과입니다(효과에는 각각의 작은 div인 매개변수를 받아들이려면 이를 처리합니다. */
var fadeOut=function(div){
div.style.zIndex =1
div.style.opacity=0;
div.style.filter="Alpha(Opacity='0')";
//div.filters.alpha.opacity=20>(function(div,opacity){
var hide=function()
{
불투명도=불투명도 0.1;
div.style.opacity=opacity;
div.style.filter ="Alpha(Opacity='" 불투명도*100 "') ";
if(opacity<1)
{
setTimeout(hide,100);
}
}
hide();
})(div,0)

} ;


/*페이드 아웃 효과 추가(많은 효과를 추가하고 효과가 나타나는 순서를 설정할 수 있음) +/
pola.addswitchTable([ [2,2,2,2,1,2,2,2],
[2,2,2,1,1,2,2,2],
[2,2,2,2 ,1,2,2,2],
[2,2,2,2,1,2,2,2],
[2,2,2,2,1,2,2,2 ],
[2,2,2,2,1,2,2,2],
[2,2,2,1,1,1,2,2 ],
[2, 2,2,2,2,2,2,2]]);
pola.addswitchTable([[2,2,2,1,1,2,2,2] ,
[2,2 ,1,2,2,1,2,2],
[2,2,2,2,2,1,2,2],
[2,2 ,2,2,1,2 ,2,2],
[2,2,2,1,2,2,2,2],
[2,2,1,2,2,2,2,2],
[2,2,1,1,1,1,2,2],
[2,2,2,2,2,2,2,2]])
pola.addswitchTable([ [2,2,2,1,1,2,2,2],
[2,2,1,2,2,1,2,2],
[2,2,2,2 ,2,1,2,2],
[2,2,2,1,1,2,2,2],
[2,2,2,2,2,1,2,2 ],
[2,2,1,2,2,1,2,2],
[2,2,2,1,1,2,2,2 ],
[2, 2,2,2,2,2,2,2]]);
pola.addswitchTable([[2,2,2,2,1,2,2,2] ,
[2,2 ,2,1,1,2,2,2],
[2,2,1,2,1,2,2,2],
[2,1 ,2,2,1,2 ,2,2],
[2,1,1,1,1,1,2,2],
[2,2,2,2,1,2,2,2],
[2,2,2,2,1,2,2,2],
[2,2,2,2,2,2,2,2]])
pola.addswitchTable([ [2,2,1,1,1,1,1,2],
[2,2,1,2,2,2,2,2],
[2,2,1,1 ,1,1,2,2],
[2,2,2,2,2,2,1,2],
[2,2,2,2 ,2,2,1,2 ],
[2,2,1,2,2,2,1,2],
[2,2,2,1,1,1,2,2 ],
[2, 2,2,2,2,2,2,2]]);
pola.addswitchTable([[2,2,2,1,1,1,2,2] ,
[2,2 ,1,2,2,2,1,2],
[2,2,1,2,2,2,2,2],
[2,2 ,1,1,1,1 ,2,2],
[2,2,1,2,2,2,1,2],
[2,2,1,2,2,2,1,2],
[2,2,2,1,1,1,2,2],
[2,2,2,2,2,2,2,2]])
pola.addswitchTable([ [2,1,1,2,2,2,2,2],
[1,2,2,1,2,1,1,2],
[1,2,2,2 ,1,2,2,1],
[1,2,1,1,1,2,2,1],
[1,2,2,1 ,1,2,2,1 ],
[2,1,1,2,2,1,1,2],
[2,2,2,2,2,2,2,2 ],
[2, 2,2,2,2,2,2,2]]);
pola.addswitchTable([[1,2,3,4,5,6,7,8] ,
[2,3 ,4,5,6,7,8,9],
[3,4,5,6,7,8,9,10],
[4,5 ,6,7,8,9 ,10,11],
[5,6,7,8,9,10,11,12],
[6,7,8,9,10,11,12,13],
[7,8,9,10,11,12,13,14],
[8,9,10,11,12,13,14,15]])
pola.addswitchTable([ [4,4,4,4,4,4,4,4],
[4,3,3,3,3,3,3,4],
[4,3,2,2 ,2,2,3,4],
[4,3,2,1,1,2,3,4],
[4,3,2,1 ,1,2,3,4 ],
[4,3,2,2,2,2,3,4],
[4,3,3,3,3,3,3,4 ],
[4, 4,4,4,4,4,4,4]])