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는 개발자가 필요에 따라 설정할 수 있는 간단하고 실용적인 옵션 설정을 제공합니다.

tr>

매개변수

설명

기본값

높이

슬라이더의 초기 높이, 수, 너비 및 높이는 슬라이더 크기의 적응형 배율 조정을 보장하는 데 사용됩니다.

320

start

초기 슬라이딩 위치, 슬라이딩을 시작할 숫자, 숫자

1

속도

슬라이딩 속도, 단위 ms, 숫자

600

간격

슬라이더 슬라이딩 간격 시간, 단위 ms, 숫자

3000

autoPlay

자동 여부 슬라이딩, 부울 true/false

false

dotShow

점 탐색 표시 여부, 부울 true/false

true

arrShow

왼쪽 및 오른쪽 화살표 탐색 표시 여부, 부울 true/false

true

touch

터치 슬라이딩 지원 여부, 부울 true/false

true

afterSlider

콜백 함수, 슬라이더를 슬라이드한 후 이 함수 호출

参数	描述	默认值
height	滑块的初始高度，数字，宽度和高度用于确保自适应等比例缩放滑块大小。	320
start	初始滑动位置，从第几个开始滑动，数字	1
speed	滑动速度，单位ms，数字	600
interval	滑块滑动间隔时间，单位ms，数字	3000
autoPlay	是否自动滑动，布尔型true/false	false
dotShow	是否显示圆点导航，布尔型true/false	true
arrShow	是否显示左右方向箭头导航，布尔型true/false	true
touch	是否支持触摸滑动，布尔型true/false	true
afterSlider	回调函数，滑动一个滑块后，调用该函数

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