휴대폰 슬라이딩을 지원하는 캐러셀 이미지 효과의 js 구현 예

이 기사의 예에서는 js를 사용하여 휴대폰에서 슬라이딩 전환을 지원하는 캐러셀 이미지 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

작동 효과는 다음과 같습니다.

전체 예제 코드를 보려면 여기를 클릭하세요이 사이트에서 다운로드하세요.

사용 예:

<script type="text/javascript" src="../src/zepto.js"></script>
<script type="text/javascript" src="../src/carousel-image.js"></script>
<script>
 $('.carousel-image').CarouselImage({
  num :$('.carousel-num')
});
</script>

또는 requirejs:

<div class="carousel-image">
<div>
 <a>
  <img src="http://www.yoursiteweb.com/images/1430073193462.jpg"/>
 </a>
 <a>
  <img src="http://www.yoursiteweb.com/images/1430073252953.png"/>
 </a>
 <a>
  <img src="http://www.yoursiteweb.com/images/1430073111420.jpg"/>
 </a>
</div>
<div class="carousel-num">
</div>
</div>
<script type="text/javascript" src="../src/zepto.js"></script>
<script type="text/javascript" src="../src/require.js"></script>
<script>
requirejs.config({
  //By default load any module IDs from js/lib
  baseUrl: '../src',
  paths: {
   $: 'zepto'
  }
});
require(['carousel-image',"$"], function(CarouselImage,$) {
  var cs = new CarouselImage();
  cs.init({
   target:$('.carousel-image'),
   num:$('.carousel-num')
  });
});
</script>

API 속성, 메소드 및 콜백:

대상:
이 컨테이너의 요소가 이벤트를 트리거함을 나타냅니다. 애니메이션 최적화를 용이하게 하려면 하위 컨테이너가 있어야 합니다.

번호:
원래 의도는 현재 인덱스의 번호를 표시하는 것이었지만 이제는 스타일에 의해 번호가 숨겨졌습니다. 숫자 스타일을 표시하려면 스타일 파일을 직접 변경하면 됩니다

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.