Plug-in de commutation d'image jQuery jquery.cycle.js exemple d'utilisation_jquery

Cycle est un excellent plug-in de changement d'image jQuery. Il fournit de très bonnes fonctions pour vous aider à utiliser la fonction diaporama du plug-in plus facilement

Téléchargez le plug-in cycle et importez-le à ce stade. au code qui l'introduit. Après avoir introduit le fichier principal jQuery.

Copier le code Le code est le suivant :

script type= "text/javascript" src="js/jquery-1.8.0.min.js">

jquery.cycle.all.js est dans le code de démonstration.

Le plug-in Cycle peut agir sur n'importe quel groupe d'éléments frères dans la page. Pour démontrer cela, nous avons besoin d'un simple

document HTML. Le document est une liste contenant des couvertures de produits et des informations associées, qui peuvent être ajoutées au corps du document HTML :

. Copier le code Le code est le suivant :

🎜>< ;img src="img/lenovopad.jpg" alt="lenove pad" />

Lenovo A3000 (8 Go/Blanc)
>
Tablette de divertissement, tablette pour téléphone portable

" alt="note3" />

Samsung GALAXY Note III


Le produit de troisième génération de Samsung Note série , équipée d'un écran éblouissant Full HD de 5,7 pouces (Super AMOLED),
la résolution est de 1080P (1920*1080 pixels)
🎜>

iPad Air
author"> ; L'iPad Air est incroyablement fin et léger. Grâce à une série d'améliorations, nous avons réduit la taille de l'iPad Air
de près d'un quart par rapport à l'iPad de la génération précédente. Cependant, lorsque vous le prendrez en main, vous constaterez toujours qu'il est toujours robuste et durable.

Ajoutez quelques styles au CSS et il sera affiché sur la page




Copier le code


Le code est le suivant :

html, body {

marge : 0 remplissage : 0 ; } corps { police : 62,5% Verdana, Helvetica, sans-serif couleur : #000 ; }

ul#goods {
list-style : aucun
marge : 0 ;
padding : 0 ;
hauteur : 210 px ;
largeur : 500 px ; > débordement : caché ;
}
ul#goods li {
list-style :
marge : 0 ;
padding : 0 ;
hauteur :
width : 500px ;
couleur de fond : #F79321 ;
position : relative ;
}
ul#goods li img {
position :
gauche : 0 ; > haut : 0 ;
largeur : 300px ;
hauteur : 210px ;
ul#goods li .title {
marge gauche : 300px ; 🎜 >largeur : 180 px ;
poids de la police : gras ;
taille de la police : 1,2 em ;
couleur de l'arrière-plan :
couleur : #fff ;
}
ul#goods li .author {
marge-gauche : 300px;
padding : 10px 10px 0 10px; 🎜 >background-color: #F79321;
color: #fff;
}


Cette liste peut être convertie en diaporama interactif via le plug-in Cycle. Cette conversion peut être effectuée en appelant la méthode .cycle() sur le conteneur approprié dans le DOM.




Copier le code


Le code est le suivant :


$(document).ready(function( ) {
$('#goods').cycle(
});
Cette syntaxe ne pourrait pas être plus simple. Comme avant d'utiliser d'autres méthodes jQuery intégrées, nous avons également appelé

.cycle() sur un objet jQuery contenant un élément DOM. Même si aucun paramètre n'est fourni, .cycle() peut nous aider à terminer le travail de conversion. Cela inclut la modification du style de la page,

afin qu'un seul élément de liste soit affiché à la fois, puis le passage à l'élément de liste suivant par fondu enchaîné toutes les 4 secondes, comme le montre la figure

Spécifier les paramètres pour la méthode du plug-in

La méthode Cycle() nous fournit de nombreux paramètres. Les fonctions spécifiques de chaque paramètre ne sont pas décrites une par une ici. Veuillez consulter d'autres documents

nous Vous pouvez modifier la vitesse de lecture et la forme de l'animation entre les deux slides du plug-in Cycle, et modifier la méthode de déclenchement du changement de slide.

Copier le code Le code est le suivant :

$(document).ready(function( ) {
$('#goods').cycle({
délai d'attente : 2000,
vitesse : 200,
pause : vrai
}
}); >

La première option de délai d'attente est utilisée pour spécifier le nombre de millisecondes à attendre entre les diapositives de commutation (2000), tandis que la vitesse détermine le nombre de millisecondes nécessaires pour basculer (200).

Avec pause définie sur true, le diaporama se mettra en pause lorsque la souris entre, ce qui est très utile lorsque le diaporama contient des liens cliquables.

Cycle a un paramètre très important : fx : sa fonction est de sélectionner des effets spéciaux.

Copier le code Le code est le suivant :

$('#goods').cycle ({
fx:'fade',
timeout: 2000,
vitesse: 200,
pause: true
}

Comprend le spécial suivant); effets blindX, cover, CurtainX, fadeZoom, growX, scrollUp, shuffle, slideX et ainsi de suite.


Téléchargement du code source