jQuery 이미지 전환 플러그인 jquery.cycle.js 사용법 example_jquery

Cycle은 훌륭한 jQuery 이미지 전환 플러그인입니다. 플러그인의 슬라이드쇼 기능을 보다 쉽게 ​​사용할 수 있도록 매우 좋은 기능을 제공합니다.

이때, Cycle 플러그인을 다운로드하여 가져오세요. 그것을 소개하는 코드에 jQuery 메인 파일을 소개한 후.

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

스크립트 유형= "text/javascript" src="js/jquery-1.8.0.min.js">

jquery.cycle.all.js는 데모 코드에 있습니다.

Cycle 플러그인은 페이지의 모든 형제 요소 그룹에 작용할 수 있습니다. 이를 입증하려면 간단한

HTML 문서가 필요합니다. 이 문서는 HTML 문서의 본문에 추가할 수 있는 제품 표지 및 관련 정보가 포함된 목록입니다.

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

🎜>< ;img src="img/lenovopad.jpg" alt="lenove pad" />

Lenovo A3000(8GB/White)
>엔터테인먼트 태블릿, 휴대폰 태블릿

Samsung GALAXY Note III

삼성 노트 3세대 제품 5.7인치 풀HD 눈부신 화면(Super AMOLED)을 탑재했으며,
해상도는 1080P(1920*1080픽셀)

🎜>< ;img src="img/ipadair.png" alt="ipadair" />

iPad Air

iPad Air는 놀라울 정도로 얇고 가볍습니다. 일련의 개선을 통해 iPad Air
의 크기는 이전 세대 iPad에 비해 거의 4분의 1로 줄었습니다. 하지만 직접 들어보면 여전히 견고하고 내구성이 있다는 것을 알 수 있습니다.

CSS에 스타일을 추가하면 페이지에 표시됩니다




코드 복사

코드는 다음과 같습니다.

html, body { margin: padding: 0 ; }

글꼴: 62.5% Verdana, Helvetica, Arial, sans-serif

색상:
배경: #fff; }

ul#goods {
목록 스타일: 없음
여백: 0;
높이: 500px; > 오버플로: 숨김;
ul#goods li {
목록 스타일: 없음
여백: 0;
높이: 210px; 너비: 500px
배경색:
위치: 상대
}
ul#goods li img {
왼쪽: 0; > 위쪽: 0;
너비: 300px;
높이: 210px;
}
ul#goods li .title {
여백: 300px; 🎜 >폭: 180px;
글꼴 두께:
글꼴 크기: 1.2em;
색상: #fff
숨김;
}
ul#goods li .author {
여백: 300px;
패딩: 10px 10px 0 10px;
폭: 180px; 🎜 > background-color: #F79321;
color: #fff;
}


이 목록은 Cycle 플러그인을 통해 대화형 슬라이드쇼로 변환할 수 있습니다. 이 변환은 DOM의 적절한 컨테이너에서 .cycle() 메서드를 호출하여 수행할 수 있습니다.




코드 복사


코드는 다음과 같습니다.


$(document).ready(function( ) {
$('#goods').cycle()


이 구문은 이보다 더 간단할 수 없습니다. 다른 내장 jQuery 메소드를 사용하기 전과 마찬가지로 DOM 요소가 포함된 jQuery 객체에 대해

.cycle()도 호출했습니다. 매개변수가 제공되지 않더라도 .cycle()은 변환 작업을 완료하는 데 도움이 될 수 있습니다. 여기에는 그림과 같이 한 번에 하나의 목록 항목만 표시되도록 페이지 스타일

을 수정한 다음 4초마다 크로스페이드 방식으로 다음 목록 항목으로 전환하는 작업이 포함됩니다.

플러그인 메소드에 대한 매개변수 지정

Cycle() 메소드는 많은 매개변수를 제공합니다. 여기서는 각 매개변수의 구체적인 기능을 하나씩 설명하지 않습니다. 다른 문서를 확인하세요

Cycle 플러그인의 두 슬라이드 사이의 재생 속도와 애니메이션 형식을 수정할 수 있으며, 슬라이드 변경의 트리거 방식을 수정할 수 있습니다.

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

$(document).ready(function( ) {
$('#goods').cycle({
시간 초과: 2000,
속도: 200,
일시 중지: true
}); >

첫 번째 시간 초과 옵션은 슬라이드 전환 사이에 대기하는 시간(2000)을 지정하는 데 사용되며, 속도는 자체 전환에 걸리는 시간(200)을 결정합니다.

일시 중지를 true로 설정하면 마우스가 들어갈 때 슬라이드쇼가 일시 중지됩니다. 이는 슬라이드쇼에 클릭 가능한 링크가 포함된 경우 매우 유용합니다.

Cycle에는 매우 중요한 매개변수인 fx가 있습니다. 이 매개변수의 기능은 특수 효과를 선택하는 것입니다.

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

$('#goods').cycle ({

fx:'fade',
timeout: 2000,
speed: 200,
pause: true
})


다음 특수 항목을 포함합니다. 블라인드X, 커버, 커튼X, 페이드줌, 성장X, 스크롤업, 셔플, 슬라이드X 등의 효과를 제공합니다.

소스코드 다운로드