Résumé: Recherche WeChat [Mr. Sanqiao ]
Logiciel: Logiciel Axure RP 9
Description: La méthode de réalisation n'est pas unique, voici une manière de le faire par Mr. Sanqiao.
Un, le problème
Dans cet article, M. Sanqiao résout principalement le réglage de l'effet interactif de l'image du carrousel, en prenant l'image du carrousel de nouvelles de Quanshi comme exemple.
Il y a plusieurs effets principaux du carrousel:
1. Les images seront lues automatiquement à tour de rôle.
2. Lorsque l'image est automatiquement commutée, le cercle dans le coin supérieur droit change en conséquence et change la couleur.
3. Lorsque vous cliquez sur le cercle, les images du carrousel changent en conséquence.
4. Lorsque cette page est ouverte, le premier cercle est rouge par défaut.
5. Lorsque la souris se déplace dans la zone d'image, le bouton de commutation s'affiche et lorsque la souris sort de la zone d'image, le bouton de commutation est masqué.
6. Lorsque vous cliquez sur le bouton de commutation, l'image du carrousel passe à la précédente et à la suivante.
L'effet détaillé peut être expérimenté en cliquant sur la page d'accueil du site officiel de l'Université normale de Quanzhou. 【Site officiel de Quanshi】
2. Processus de résolution
Permettez-moi d'abord de vous présenter la dénomination des composants associés dans cette expérience pour faciliter la compréhension de chacun du contenu du tutoriel.
1. Comment lire automatiquement les images à tour de rôle?
Sélectionnez le panneau dynamique S'il
existe plusieurs images de carrousel, ajoutez plusieurs pages dynamiques, puis ajoutez les images aux pages correspondantes.
Définissez l'effet interactif de [Chargement] sur l'ensemble du panneau dynamique du carrousel, comme illustré dans la figure:
2. Lorsque l'image est automatiquement commutée, comment faire basculer le cercle dans le coin supérieur droit en conséquence et changer la couleur?
Ajoutez d'abord quatre cercles blancs
, puis ajoutez le style sélectionné à chaque cercle.
Définissez l'effet d'interaction [lorsque l'état change] sur l'ensemble du panneau dynamique du carrousel, comme illustré dans la figure:
3. Lorsque vous cliquez sur le cercle, la façon de créer les images du carrousel changera également en conséquence.
Définissez l'effet d'interaction correspondant de [clic] dans chaque cercle, comme illustré dans la figure:
4. Lors de l'ouverture de cette page, comment rendre le premier cercle rouge par défaut?
Définissez l'effet interactif de [Chargement] pour le premier cercle 11, comme illustré dans la figure:
5. Comment afficher le bouton bascule lorsque la souris se déplace dans la zone d'image? Comment masquer le bouton bascule lorsque la souris sort de la zone d'image?
Définissez les mêmes effets d'interaction de [Mouse In] et [Mouse Out] sur les trois parties Direction Left-Small Carousel, Direction Right-Small Carousel et Small Carousel, comme illustré dans la figure:
6. Lorsque je clique sur le bouton de commutation, comment faire basculer les images du carrousel vers les images précédentes et suivantes?
Ajoutez l'effet interactif de [clic] au bouton bascule sur la droite, comme indiqué sur la figure:
Ajoutez l'effet interactif de [clic] au bouton de commutation gauche, comme indiqué sur la figure:
À ce stade, tous les effets interactifs de Quanshi News Carousel sont définis.
Ce n'est pas facile d'organiser des articles, si vous avez de l'aide, aimez et suivez votre soutien, merci! Wechat recherche [ Sanqiao Jun ], et réponds [Follow] avec un package de ressources préparé par moi. Suivi de mise à jour continue ~~~