jQuery 플러그인 Elastislide는 반응형 포커스 맵 원활한 스크롤 전환 효과를 구현합니다.

반응형 jQuery 초점 이미지 원활한 스크롤링 전환 특수 효과 플러그인 지원 Elastislide는 왼쪽 및 오른쪽 회전식 그림, 위아래 회전식 그림, 적응형 모바일 디스플레이를 지원하고 다양한 매개변수를 지원하는 매우 아름다운 그림 회전식 특수 효과 플러그인입니다. 구성: 방향: 'horizontal'(수평 전환), 속도: 500(밀리초 단위 전환 속도), easing: 'ease-in-out'(애니메이션 효과), minItems: 3(기본 디스플레이 수) 등, 브라우저 호환성 : 낮은 버전의 브라우저도 괜찮다면 IE8 이상의 최신 브라우저를 사용할 수 있습니다. 물론 모바일 터치스크린도 사용할 수 있습니다.

반응형 jQuery 초점 이미지 원활한 스크롤 전환 특수 효과 플러그인 Elastislide 지원

사용법:

1. jQuery 및 플러그인 로드

<script type="text/javascript" src="libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquerypp.custom.js"></script> 
<script type="text/javascript" src="js/jquery.elastislide.js"></script> 
<link rel="stylesheet" type="text/css" href="css/elastislide.css" /> 

2.HTML 콘텐츠

<ul id="carousel" class="elastislide-list"> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/small/1.jpg"  class="lazy" alt="jQuery 플러그인 Elastislide는 반응형 포커스 맵 원활한 스크롤 전환 효과를 구현합니다." /></a></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/small/2.jpg"  class="lazy" alt="image02" /></a></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/small/3.jpg"  class="lazy" alt="image03" /></a></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/small/4.jpg"  class="lazy" alt="image04" /></a></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/small/5.jpg"  class="lazy" alt="image05" /></a></li> 
<li><a href="#"><img src="/static/imghwm/default1.png"  data-src="images/small/6.jpg"  class="lazy" alt="image06" /></a></li> 
</ul> 

3. 함수 호출

<script type="text/javascript"> 
$(document).ready(function() { 
  $( '#carousel' ).elastislide(); 
}); 
</script> 

데모 보기 다운로드

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