>  기사  >  웹 프론트엔드  >  Jquery를 사용하여 사진 회전식 슬라이드를 만드는 방법

Jquery를 사용하여 사진 회전식 슬라이드를 만드는 방법

coldplay.xixi
coldplay.xixi원래의
2020-11-24 12:11:213522검색

jquery를 사용하여 이미지 캐러셀을 수행하는 방법: 먼저 jquery 스크립트 파일을 도입한 다음 Lightslider 스크립트 파일을 도입하고 js 스크립트에서 ul 태그의 ID를 전달하여 lightSlider 메서드를 호출한 다음 마지막으로 페이지를 실행합니다.

Jquery를 사용하여 사진 회전식 슬라이드를 만드는 방법

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.5.1 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

jquery를 사용하여 이미지 캐러셀을 수행하는 방법:

1. Jquery에는 많은 강력한 플러그인이 있습니다. 물론 Baidu에서 'lightslider'를 검색한 다음 다운로드하세요. 플러그인 코드.

Jquery를 사용하여 사진 회전식 슬라이드를 만드는 방법

2. 그런 다음 이미지 캐러셀을 구현합니다. 물론 jquery 스크립트 파일을 먼저 소개해야 합니다.

Jquery를 사용하여 사진 회전식 슬라이드를 만드는 방법

3. 그런 다음 Lightslider의 스크립트 파일을 소개하고 해당 스타일 파일도 필요합니다.

Jquery를 사용하여 사진 회전식 슬라이드를 만드는 방법

4. html 부분은 매우 간단합니다. ul 또는 li 태그만 있으면 됩니다. li 태그에 data-thumb 속성이 있고 속성 값이 이미지의 경로라는 점에 유의하세요.

Jquery를 사용하여 사진 회전식 슬라이드를 만드는 방법

5. js 스크립트에서 ul 태그의 ID를 전달하여 lightSlider 메서드를 호출하여 인스턴스를 초기화합니다. 내부 매개변수에 대한 설명서를 참조하세요.

Jquery를 사용하여 사진 회전식 슬라이드를 만드는 방법

6. 페이지를 실행하면 아름다운 그림 캐러셀 플러그인을 볼 수 있습니다.

Jquery를 사용하여 사진 회전식 슬라이드를 만드는 방법

7. 자동 재생 외에도 아래 사진을 클릭하면 그에 맞게 큰 사진도 표시됩니다.

Jquery를 사용하여 사진 회전식 슬라이드를 만드는 방법

관련 무료 학습 권장 사항: JavaScript(비디오)

위 내용은 Jquery를 사용하여 사진 회전식 슬라이드를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.