Axure knowledge points: how to make a carousel effect (take the official website of Quanzhou Normal University as an example)

Abstract: WeChat search [Mr. Sanqiao ]
Software: Axure RP 9 software
Description: The implementation method is not unique. Here is a way to make it by Mr. Sanqiao.

One, the problem

In this article, Mr. Sanqiao mainly solves the setting of the interactive effect of the carousel picture, taking the news carousel picture of Quanshi as an example.
Insert picture description here
There are several main effects of this carousel:
1. The pictures will be played automatically in turn.
2. When the picture is automatically switched, the circle in the upper right corner will switch accordingly and change the color.
3. When you click the circle, the pictures in the carousel will switch accordingly.
4. When this page is opened, the first circle is red by default.
5. When the mouse moves into the picture area, the switch button will be displayed; when the mouse moves out of the picture area, the switch button will be hidden.
6. When the switch button is clicked, the carousel picture will switch to the previous and next corresponding.

The detailed effect can be experienced by clicking on the homepage of the official website of Quanzhou Normal University. Quanshi official website

2. Resolution process

Let me first introduce the naming of related components in this experiment to facilitate everyone's understanding of the content of the tutorial.
Insert picture description here

1. How to automatically play pictures in turn?

Select the dynamic panel If
Insert picture description here
there are several carousel pictures, add several dynamic pages, and then add the pictures to the corresponding pages.
Insert picture description here
Set the interactive effect of [Loading] on the entire dynamic panel of the carousel, as shown in the figure:
Insert picture description here

2. When the picture is automatically switched, how to make the circle in the upper right corner switch accordingly and change the color?

First add four white circle
Insert picture description here
and then add the selected style to each circle.
Insert picture description here
Set the interaction effect [when status changes] to the entire dynamic panel of the carousel, as shown in the figure:
Insert picture description here
Insert picture description here

3. When clicking the circle, how to make the carousel pictures will also switch accordingly.

Set the corresponding interaction effect of [click] in each circle, as shown in the figure:
Insert picture description here
Insert picture description here
Insert picture description here
Insert picture description here

4. When opening this page, how to make the first circle red by default?

Set the interactive effect of [Loading] for the first circle 11, as shown in the figure:
Insert picture description here

5. How to display the toggle button when the mouse moves into the picture area? How to hide the toggle button when the mouse moves out of the picture area?

Set the same interaction effects of [Mouse In] and [Mouse Out] to the three parts of Direction Left-Small Carousel, Direction Right-Small Carousel, and Small Carousel, as shown in the figure:
Insert picture description here

Insert picture description here

6. When I click the switch button, how to make the carousel pictures switch to the previous and next pictures?

Add the interactive effect of [click] to the toggle button on the right, as shown in the figure:
Insert picture description here

Insert picture description here
Add the interactive effect of [click] to the left switch button, as shown in the figure:
Insert picture description here
Insert picture description here

At this point, all the interactive effects of Quanshi News Carousel are set.


It is not easy to organize articles. If you have any help, please like and follow your support, thank you! Wechat search for [ Sanqiao Jun ], and reply [Follow] with a resource package prepared by me. Follow-up continuous update~~~

Guess you like

Origin blog.csdn.net/weixin_46218781/article/details/108780554