Le plug-in jQuery slicebox implémente la commutation de carrousel d'images animées 3D effect_jquery

Magnifique plug-in d'effets spéciaux de commutation de carrousel d'images animées jQuery 3D jquery.slicebox.js, basé sur jQuery, le plug-in utilise des effets d'animation CSS 3D, prend en charge les appels de rappel d'événements et prend en charge la personnalisation des paramètres, tels que : vitesse : Vitesse de commutation 600, lecture automatique : vrai Que ce soit pour jouer automatiquement ou non, en termes de compatibilité du navigateur, le navigateur doit prendre en charge l'attribut de transformation CSS3. S'il ne le prend pas en charge, vous ne pourrez pas voir les effets spéciaux 3D. est recommandé d'apprendre le code.

Utilisation :

1. Charger les plug-ins et 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.Contenu HTML, l'en-tête HTML doit utiliser l'en-tête HTML5

<ul id="sb-slider" class="sb-slider"> 
 <li> 
<img src="images/1.jpg" alt="Le plug-in jQuery slicebox implémente la commutation de carrousel dimages animées 3D effect_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. Appel de fonction

<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>  

Description du paramètre :
orientation : "r", //Indique la direction de commutation de la diapositive, qui peut être (v) la direction verticale, (h) la direction horizontale ou (r) la direction aléatoire
perspective : 800, //Distance du point de perspective, vous pouvez vérifier l'effet en modifiant sa valeur
cuboidsCount : 5, //Le nombre de blocs que la diapositive est coupée horizontalement ou verticalement. Chaque pièce coupée sera commutée sous forme 3D
. cuboidsRandom : true, //Si la valeur du paramètre cuboidsCount est aléatoire
maxCuboidsCount : 5, //Définissez une valeur pour spécifier la valeur maximale de cuboidsCount
colorHiddenSides : "#333", //Couleur des slides masquées
sequentialFactor : 150, //Temps de commutation des diapositives (millisecondes)
vitesse : 600, //La vitesse de chaque cube 3D
autoplay : true, //Démarrer automatiquement la commutation

Démo Démo Téléchargement du script

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.