jQuery 플러그인 Slicebox는 3D 애니메이션 그림 캐러셀 전환 효과를 구현합니다._jquery

아름다운 jQuery 3D 애니메이션 그림 회전식 전환 특수 효과 플러그인 jquery.slicebox.js, jQuery를 기반으로 하는 플러그인은 CSS 3D 애니메이션 효과를 사용하고 이벤트 콜백 호출을 지원하며 다음과 같은 매개변수 사용자 정의를 지원합니다. 600 전환 속도, 자동 재생: true 자동 재생 여부는 브라우저 호환성 측면에서 브라우저가 CSS3 변환 속성을 지원해야 하며, 지원하지 않으면 3D 특수 효과를 볼 수 없습니다. 코드를 배우는 것이 좋습니다.

사용법:

1. 플러그인 및 jQuery 로드

<link type="text/css" rel="stylesheet" href="css/slicebox.css" /> 
<script type="text/javascript" src="js/modernizr.js"></script> 
<script type="text/javascript" src="js/jquery8.js"></script> 
<script type="text/javascript" src="js/jquery.slicebox.js"></script> 

2.HTML 콘텐츠, HTML 헤더는 HTML5 헤더
를 사용해야 합니다.

<ul id="sb-slider" class="sb-slider"> 
 <li> 
<img src="images/1.jpg" alt="jQuery 플러그인 Slicebox는 3D 애니메이션 그림 캐러셀 전환 효과를 구현합니다._jquery"/> 
</li> 
<li> 
<img src="images/2.jpg" alt="image2"/> 
</li> 
<li> 
<img src="images/3.jpg" alt="image2"/> 
</li> 
<li> 
<img src="images/4.jpg" alt="image2"/> 
</li> 
<li> 
<img src="images/5.jpg" alt="image2"/> 
</li> 
</ul> 
<div> 
<span onclick="$slicebox.previous();">上一页</span> 
<span onclick="$slicebox.next();">下一页</span> 
<span onclick="$slicebox.jump(4);">跳页</span> 
</div> 

3. 함수 호출

<script type="text/javascript"> 
var $slicebox; $(function() { 
  $slicebox = $('#sb-slider').slicebox({ 
    interval:6000, 
    orientation : "r", //表示幻灯片的切换方向，可取 (v)垂直方向, (h)水平方向 or (r)随机方向 
    perspective : 800, //透视点距离，可以通过改变其值查看效果 
    cuboidsCount : 5, //幻灯片横向或纵向被切割的块数，切割的每一块将会以3D的形式切换 
    cuboidsRandom : true, //是否随机 cuboidsCount 参数的值 
    maxCuboidsCount : 5, //设置一个值用来规定最大的 cuboidsCount 值 
    colorHiddenSides : "#333", //隐藏的幻灯片的颜色 
    sequentialFactor : 150, //幻灯片切换时间（毫秒数） 
    speed : 600, //每一块3D立方体的速度 
    autoplay : true, //是否自动开始切换 
    onBeforeChange : function(position) { return false; }, 
    onAfterChange : function(position) { return false; } 
  }); 
}); 
</script>  

매개변수 설명:
방향: "r", //슬라이드의 전환 방향을 나타냅니다. 이는 (v) 수직 방향, (h) 수평 방향 또는 (r) 임의 방향일 수 있습니다.
원근감: 800, //원근점 거리, 값을 변경하여 효과를 확인할 수 있습니다
cuboidsCount: 5, //슬라이드를 가로 또는 세로로 자르는 블록 수입니다. 각 조각 컷은 3D 형태로 전환됩니다.
cuboidsRandom: true, //cuboidsCount 매개변수 값이 무작위인지 여부
maxCuboidsCount: 5, //최대 CuboidsCount 값을 지정하는 값을 설정합니다
colorHiddenSides : "#333", //숨겨진 슬라이드 색상
entialFactor: 150, //슬라이드 전환 시간(밀리초)
speed: 600, //각 3D 큐브의 속도
autoplay: true, //자동으로 전환을 시작할지 여부

데모 데모 스크립트 다운로드

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