hwSlider-content 슬라이딩 전환 효과(3): jquery.hwSlide.js 플러그인 캡슐화

처음 두 부분의 설명을 마치고 나면 콘텐츠 슬라이딩 전환의 기본 개발 아이디어와 기술을 대략적으로 알게 되었습니다. 이제 세 번째 부분에서는 처음 두 부분의 코드를 최적화하고 이를 jQuery 플러그인으로 캡슐화합니다. : jquery.hwSlide.js. 개발자는 다양한 이미지 캐러셀 효과, 포커스 이미지 효과, 그래픽과 텍스트가 혼합된 슬라이딩 효과를 쉽게 만들 수 있습니다.



데모 다운로드 소스 코드 보기

hwSlider에는 다음과 같은 기능이 있습니다.

다중 매개변수 사용자 정의 , 다양한 프로젝트 요구 사항을 충족하십시오.

모바일 기기에서 터치 슬라이딩을 지원합니다.

이미지와 텍스트의 혼합 배치를 지원하며, 다양한 HTML 요소를 지원합니다.

화면 크기에 반응하고 적응합니다.

동일한 페이지는 여러 개의 슬라이딩 스위치를 지원합니다.

경량, 압축 버전은 4KB 미만입니다.

모든 최신 브라우저를 지원하고 ie8+를 지원합니다.

HTML

먼저 페이지 헤드에 있는 hwSlider에 필요한 기본 CSS 스타일 파일과 jquery 라이브러리 파일 및 hwSlider 플러그인을 로드합니다. 물론 페이지 하단의 Loads에 js 파일을 넣는 것이 좋습니다.

[code=html]
<link type="text/css"  rel="stylesheet" href="css/hwslider.css" />
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hwSlider.js"></script>

그런 다음 본문에 다음 HTML 코드를 추가합니다.

[code=html]
<p class="hwslider">
	<ul>
		<li><img src="images/s1.jpg" alt=""></li>
		<li><img src="images/s2.jpg" alt=""></li>
		<li>hwSlider.js</li>
	</ul>
</p>

에 따라 HTML 구조를 배치합니다. 위의 코드에서 각 A li 요소에는 슬라이더가 포함되어 있습니다. 슬라이더의 내용은 그림, 텍스트 또는 그림과 텍스트의 조합 등이 될 수 있습니다.

jQuery

관심 있는 학생은 jQuery 플러그인 템플릿 소개에 대한 이 기사를 읽어보세요. jQuery 팝업 레이어 플러그 -in-hwLayer, I 코드는 jQuery 플러그인: jquery.hwSlider.js로 캡슐화되었습니다. 특정 코드를 보려면 소스 코드를 다운로드하세요. Flexslider 플러그인 호출은 매우 간단합니다.

[code=js]
$(function() { 
    $(".hwslider").hwSlider(); 
});

페이지를 실행하여 슬라이더 효과를 확인하세요. hwSlider는 기본적으로 600x320의 슬라이더 크기를 사용합니다. 옵션을 설정하여 기본 슬라이더 초기 크기를 변경할 수 있습니다.

hwSlider 옵션 설정

hwSlider는 개발자가 필요에 따라 설정할 수 있는 간단하고 실용적인 옵션 설정을 제공합니다.

위 hwSlider-content 슬라이딩 전환 효과의 내용입니다(3): jquery.hwSlide.js 플러그인 패키지에 대한 자세한 내용은 PHP 중국어 웹사이트(m.sbmmt.com)를 참고하세요!