I would like to share with you a case that I have done, from a PC-side high-fidelity prototype I made last year.
Case description
A set of pictures is cycled in a fixed area (slide effect), and the bar-shaped pagination label changes its style correspondingly as different pictures are played.
Component preparation
Drag out a dynamic panel from the component library, we name it Banner, and add 1+N states to it, and put pictures of the same size in each state (remember that the positions should be unified).
Let's do the same bar label as above b2b data, the first one of the first state is selected, and it will increase downwards. (This method may be a bit stupid, but it is more convenient when setting interactive properties, which also includes personal habits).
This is basically done, and then we start the next step.
Thought analysis
Using the dynamic panel's ability to add multiple states, I created 6 states;
Put the pictures that need to be displayed in the 6 pictures into each state;
Make the bar label an effect that can only be selected only (the first one in the first state is selected), and the other states are incremented;
After the page is opened, the effect of automatic loop playback of pictures (when loading) is enabled, and each time a new picture is switched, different bar label states are switched at the same time.
After the idea is basically perfect, let's do this effect.
After the Banner dynamic panel is set to, the bar labels are also set. At this time, we can achieve the effect of automatic picture switching, and then we can continue to optimize the interactive experience~
We add a clickable button to each side of the Banner, click the left button (forward one state), click the right button (backward one state).
Finally, we add an interactive effect of moving the mouse in and out, as shown in the figure:
Done (Applause to yourself from the completed buddies).
Summarize
Realize automatic switching of pictures or bar labels;
The automatic switching is stopped when the mouse is moved in, and the automatic switching can be resumed when the mouse is moved out;
To achieve manual switching by clicking the buttons on both sides.
This is the end of today's sharing. If you have any comments and suggestions, please leave a message below, I will reply to you as soon as possible, thank you! !
This article was originally published by @李桂东 Originally published on Everyone is a Product Manager. Reproduction is prohibited without permission
The title map comes from the Internet