Rotation à 360 degrés des images de produits basée sur le plug-in jQuery Circlr_jquery

Circlr est un plug-in jQuery qui peut faire pivoter et afficher les images de produits à 360 degrés. Circlr utilise des photos de produits prises régulièrement sous certains angles pour créer l'effet de rotation des images image par image en utilisant le glisser de la souris, la molette de la souris et le toucher mobile. Par rapport au précédent Rollerblade, l'animation est beaucoup plus fluide et plus facile à contrôler. Ce plug-in est très adapté à l'affichage des produits.

Ses caractéristiques sont :

Prend en charge la rotation horizontale ou verticale.

Prend en charge les événements tactiles mobiles.

Prise en charge des événements de défilement.

Traitement de préchargement d'image.

Vous pouvez faire pivoter les images en sens inverse et en boucle.

Tutoriel d'exemple sympa jQ : image du produit jQuery Rotation à 360 degrés Circlr

Présentation des fichiers de base

<script src='js/jquery.js'></script>  
<script src='js/circlr.js'></script>

Pour créer du HTML, il vous suffit de créer un conteneur DIV pour placer des images. Bien sûr, vous pouvez également ajouter un DIV chargé pour améliorer l'expérience.

<div id="circlr">
 <img data-src="picture/00.jpg">
 <img data-src="picture/01.jpg">
 <img data-src="picture/02.jpg">
 <img data-src="picture/03.jpg">
 <img data-src="picture/04.jpg">
 <img data-src="picture/05.jpg">
 <img data-src="picture/06.jpg">
 <img data-src="picture/07.jpg">
 <img data-src="picture/08.jpg">
 <img data-src="picture/09.jpg">
 <img data-src="picture/10.jpg">
 <img data-src="picture/11.jpg">
 <img data-src="picture/12.jpg">
 <img data-src="picture/13.jpg">
 <img data-src="picture/14.jpg">
 <img data-src="picture/15.jpg">
 <div id="loader"></div>
</div>

Écrivez du JS et initialisez le plug-in

var crl = circlr(element, options); //调用方法
//element：放置图片的容器元素的ID。
//options：参数对象。 
//实例
 var crl = circlr('circlr', {
  scroll : true,
  loader : 'loader'
 });

Paramètres

souris : s'il faut faire pivoter l'image avec la souris, la valeur par défaut est vraie.

Défilement : s'il faut faire pivoter l'image via le défilement, la valeur par défaut est fausse.

vertical : s'il faut faire pivoter l'image lors du déplacement de la souris dans le sens vertical, la valeur par défaut est fausse.

reverse : s'il faut inverser la direction, la valeur par défaut est fausse.

cycle : s'il faut faire défiler l'image, la valeur par défaut est vraie.

start : démarre l'image d'animation, la valeur par défaut est 0.

speed : La vitesse à laquelle les images d'animation sont commutées dans circlr.turn(i). La valeur par défaut est de 50 millisecondes.

lecture automatique : s'il faut effectuer automatiquement une rotation et une lecture à 360 degrés des images. La valeur par défaut est fausse.

playSpeed : La vitesse de lecture de la séquence d'animation, la valeur par défaut est de 100 millisecondes.

loader : ID de l'élément DOM préchargé.

ready : fonction de rappel après le chargement de l'image.

changement : La fonction de rappel après l'image d'animation est adaptée (en prenant l'image actuelle et le nombre total d'images comme paramètres).

Méthode

crl.el : renvoie le nœud d'élément DOM de l'objet.

crl.length : renvoie le nombre total d'images d'animation de l'objet.

crl.turn(i) : L'animation pivote jusqu'à la ième image.

crl.go(i) : L'animation passe à la ième image.

crl.play() : démarre la lecture de la séquence d'animation.

crl.stop() : Arrête la lecture de l'animation.

crl.hide() : Masquer le nœud de l'élément DOM de l'objet.

crl.show() : Affiche le nœud de l'élément DOM de l'objet.

crl.set(options) : Modifiez les paramètres de l'objet après l'initialisation du plugin :

verticale

inverse

cycle

vitesse

playSpeed

Le contenu ci-dessus est présenté dans cet article pour implémenter une rotation à 360 degrés des images de produits basée sur le plug-in jQuery Circlr. J'espère qu'il vous plaira.