jQuery 플러그인 Skippr는 포커스 차트 슬라이드 효과를 구현합니다._jquery

WBOY
풀어 주다: 2016-05-16 16:04:39
원래의
1242명이 탐색했습니다.
역사상 최고의 포커스 차트 슬라이드쇼용 jQuery 플러그인, Skippr, 경량 플러그인, 반응형 레이아웃 플러그인 및 강력한 매개변수 사용자 정의
구성에서는 전환 속도, 전환 방법, 왼쪽 및 오른쪽 화살표 표시 여부, 자동 재생 여부, 자동 재생 간격 및 기타 구성을 사용자 정의할 수 있습니다
매개변수, 호출 플러그인도 매우 간단하고 사용하기 쉽습니다. 호출 방법은 다음과 같습니다.
1. jQuery 및 플러그인 로드
<link rel="stylesheet" href="css/jquery.skippr.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.skippr.min.js"></script>
로그인 후 복사
2.HTML 콘텐츠
<div id="container"> 
    <div id="theTarget"> 
    <div style="background-image: url(img/image1.jpg)"></div> 
    <div style="background-image: url(img/image2.jpg)"></div> 
    <div style="background-image: url(img/image3.jpg)"></div> 
    <div style="background-image: url(img/image4.jpg)"></div> 
   <div style="background-image: url(img/image5.jpg)"></div> 
  </div>   
</div> 
로그인 후 복사
3. 함수 호출
<script> 
 $(document).ready(function(){ 
 
     $("#theTarget").skippr({ 
 
      transition: 'slide', 
      speed: 1000, 
      easing: 'easeOutQuart', 
      navType: 'block', 
      childrenElementType: 'div', 
      arrows: true, 
      autoPlay: false, 
      autoPlayDuration: 5000, 
      keyboardOnAlways: true, 
      hidePrevious: false 
    });       
 
  }); 
</script> 
로그인 후 복사
파라미터 구성 설명
전환: (페이드/슬라이드) 전환 방법
속도: 전환 속도(밀리초)
easing: 전환 효과(easeOutQuart)
navType: 아래 탐색 유형(블록/버블)
화살표: 화살표 유무(true/false)
autoPlay: 자동 재생 여부(true/false)
autoPlayDuration: 자동 재생 간격(밀리초)
keyboardOnAlways: 키보드 전환 지원 여부(true/false)
hidePrevious: 첫 번째 전환 화살표를 숨길지 여부(true/false)

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿