molette de la souris jquery pour réaliser le changement d'image

Cette fois, je vais vous présenter la molette de la souris jquery pour réaliser le changement d'image. Quelles sont les précautions pour que la molette de la souris jquery implémente le changement d'image. Ce qui suit est un cas pratique, jetons un coup d'œil.

L'effet obtenu dans cet exemple : L'image change lorsque la molette de la souris défile.
Prise en charge des touches fléchées du clavier pour obtenir un effet de changement d'image.
Prend en charge le clic pour changer d'image et le clic sur le lien de l'image actuelle.
Le curseur de la barre de progression affiche la progression du nombre de photos.
Tous les éléments requis

. #imageflow

<p class="demo"> 
 <p id="imageflow"> 
 <p id="loading"><img src="images/loader.gif" alt="loading" /></p> 
 <p id="captions"></p> 
 <p id="images"> 
 <img src="images/s1.jpg" alt="image1" /> 
 <img src="images/s2.jpg" alt="image2" /> 
 <img src="images/s3.jpg" alt="image3" /> 
 <img src="images/s4.jpg" alt="image4" /> 
 </p> 
 <p id="scrollbar"> 
 <p id="slider"></p> 
 </p> 
 </p> 
</p>

est obligatoire, et le nom ID de l'élément qu'il contient ne peut pas être modifié. Si vous souhaitez vraiment le modifier, vous devez d'abord définir ou modifier directement le code JS . #loading est utilisé pour charger une image d'animation de chargement. Bien sûr, vous pouvez également écrire directement "loading" ou autre texte. #captionsUtilisé pour afficher la légende de l'image. #imagesPlacez les images que vous souhaitez faire défiler et changez. Il n'y a pas de limite au nombre. #scrollbar est une barre de progression qui affiche des images. #slider est un curseur Lorsque vous changez d'image, le curseur glisse vers la position correspondante pour afficher le nombre d'images. CSSCSS
est un élément clé de l'ensemble de l'effet. Si le CSS n'est pas bien contrôlé, vous n'obtiendrez pas le résultat souhaité.

.demo { width:860px; height:300px; margin:20px auto; position:relative; background:#e8f5fe; overflow:hidden } 
#images { margin:20px 0 0 60px; width:860px } 
#images img { position:absolute; margin-top:-160px } 
#loading { margin:0; color:#fff; text-align:center } 
#loading img { position:ralative; margin:0 } 
#captions { position:relative; height:24px; line-height:24px; top:100px; left:320px; background:url(images/cap_bg.png) no-repeat center center; color:#fff; font-weight:bold; text-align:center; z-index:10000 } 
#scrollbar { position:relative; top:-100px; height:2px; z-index:10001 background:#abcd3a url(images/scroll.gif) repeat-x; 
} 
#slider { position:absolute; width:15px; height:4px; margin:-1px 0 0 -1px; background:url(images/bar.gif) no-repeat; z-index:10002 }

.demo

définit la largeur et la hauteur, et définit la position:relative et overflow:hidden afin de limiter la portée de l'effet de défilement de la molette de la souris au .demo. #images
définit la valeur de la marge et définit le positionnement relatif de l'image interne. #captions définit le style utilisé pour afficher le titre de l'image. Notez que j'utilise l'image semi-transparente cap_bg.png comme image d'arrière-plan. Les images png transparentes ne sont pas prises en charge sous IE6. donc vous Un traitement pertinent est requis. Examinons ensuite les paramètres de la barre de progression et du curseur de défilement. Ils utilisent tous des paramètres de positionnement et de profondeur. Ce n'est que si vous les testez lentement que vous connaîtrez le secret. Présentation de la bibliothèque jquery et des fichiers js coulissantsToutes les actions js sont terminées dans imageflow.js. Je n'ai apporté que de légères modifications et vous pouvez les utiliser directement. Vous pouvez maintenant voir l'effet. Mais il reste encore des questions : Comment obtenir l'adresse de connexion de l'image ?

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/imageflow.js"></script>

L'effet final devrait être que lorsque vous cliquez sur l'image actuellement affichée, vous serez connecté à une page pour afficher des informations détaillées liées à l'image. Alors comment obtenir cette adresse de lien ? Il y a deux lignes de code à partir de la ligne 252 :

On voit que l'adresse de lien de l'image provient de son attribut : longdesc, lorsque l'image est cliqué , la page passera à la page d'adresse correspondante. Eh bien, maintenant que nous revenons au code XHTML avec lequel nous avons commencé, il nous suffit d'attribuer l'attribut longdesc à chaque image et de définir la valeur sur l'adresse de la page Web correspondante. Tels que : Maintenant, la tâche est terminée. Après avoir lu cet exemple, vous constaterez que vous n'avez besoin d'aucun code jquery, car imageflow a déjà complété tous les codes d'opération.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

image.url = image.getAttribute("longdesc"); 
image.ondblclick = function() { document.location = this.url; }

Lecture recommandée :

<img src="images/s1.jpg" alt="image1" longdesc="#" />

Implémentation du changement de navigation par défilement par onglets (avec code)

changement d'image d'arrière-plan jquery (avec code) Code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!