Practical JS focus chart switching effect structure behavior Separation

The focus chart switching effect may not be familiar to the front-end. There are many ways to implement it. One of the common methods is described as follows:
How can I synchronize the current digital navigation with the display of images?
There are two areas: the image switching area and the digital navigation area. They correspond to two cyclic functions, plays (value) and setbg (value );
When an image is cyclically switched to 2nd images, the current status of the digital navigation is also changed to the position of 2nd to achieve a synchronous effect, the key here is to pass them the same parameter value, and this task is handed over to the function MEA (value );
The image should be automatically switched. When the last image is displayed cyclically, it is returned to the first image. This is done using the auto () function, but auto () the parameter n is only used to judge the incremental cycle of the parameter n. There is no motivation to support it, and it cannot do anything about it,
At this time, the setauto () function comes with setinterval (), which is the engine device of the entire system and runs auto () at a certain time. The parameter n is also changing progressively; N is passed to the function MEA (n );
The final interaction behavior, when the mouse slides out, the image switching area and the digital navigation area stay in the current state. Don't forget the function mouse (n), which is exactly what it deserves;
In this way, the division of labor and cooperation among several function brothers performed their respective duties to accomplish this job well;
1. html CopyCode The Code is as follows: <Div class = "jfocus">
<Div id = "jfocuspic">
<A href = "#" style = "display: block;"> image 1 </a>
<A href = "#"> Image 2 </a>
<A href = "#"> picture 3 </a>
<A href = "#"> figure 4 </a>
</Div>
<Ul id = "jfocusnum">
<Li class = "on"> 1 </LI>
<Li> 2 </LI>
<Li> 3 </LI>
<Li> 4 </LI>
</Ul>
</Div>

2. CSSCopy codeThe Code is as follows:. jfocus {width: 300px; Height: 300px; Border: # CCC 1px solid; Background-color: # FFF ;}
# Jfocuspic {filter: progid: DXImageTransform. Microsoft. Fade (duration = 0.5, overlap = 1.0); width: 300px; Height: 200px; overflow: hidden ;}
# Jfocuspic A {display: none; font-size: 2em; text-align: center; line-Height: 200px; font-weight: bold; Background-color: # CCC; height: 200px; cursor: pointer ;}
# Jfocusnum Li {cursor: pointer; Height: 50px; width: 50px; line-Height: 50px; display: inline-block; color: #000; Border: #999 1px solid; text-align: center; Background-color: # CCC; float: Left; margin: 0 5px ;}
# Jfocusnum Li. On {color: # f00; font-weight: bold; Border: #900 1px solid; font-size: 14px ;}

3. js Copy code The Code is as follows: function $ (ID) {return document. getelementbyid (ID );}
VaR n = 0;
VaR num = $ ("jfocusnum"). getelementsbytagname ("Li ");
VaR imglist = $ ("jfocuspic"). getelementsbytagname ("");
Function setbg (value) {// number area switch, add the class "on" to the current element, and clear the classes of other elements;
For (VAR I = 0; I <num. length; I ++) num [I]. classname = (value = I )? "On ":"";
}
Function plays (value) {// image region Transformation
Try // try... catch can test errors in the code. The try part contains the code to be run, and the catch part contains the code that runs when an error occurs.
{
With (jfocuspic) // adds a filter effect to IE;
{
Filters [0]. Apply (); // before starting a dynamic effect, you need to apply the apply event to generate a filter effect.
For (I = 0; I <num. length; I ++) I = value? Children [I]. style. Display = "Block": Children [I]. style. Display = "NONE ";
Filters [0]. Play (); // The play () method is used to play dynamic effects. Before that, a filter style has been added to the image layer in the # jfocus_pic style;
}
}
Catch (E)
{
For (I = 0; I <num. length; I ++)
{
I = value? Imglist [I]. style. Display = "Block": imglist [I]. style. Display = "NONE"; // display the current image and hide other images;
}
}
}
Function mouse (n ){
For (VAR I = 0; I <num. length; I ++ ){
(Function (n ){
Num [I]. onmouseover = imglist [I]. onmouseover = function () {clearinterval (autostart); MEA (n) ;}// stop the automatic switch after the mouse passes, and pass the current parameter n to the function MEA ()
Num [I]. onmouseout = imglist [I]. onmouseout = function () {setauto ();}
}) (I );
}
}
Function MEA (value ){
N = value;
Mouse ();
Setbg (value );
Plays (value );
}
Function auto () {// the key to making the image rotate automatically due to the increment of parameter n;
N ++;
If (n> num. Length-1) n = 0;
MEA (N );
}
Function setauto () {autostart = setinterval ("auto ()", 2000)} // The auto () function is executed every 2000 milliseconds, parameter n increments by 1.
Setauto (); // call a function

DEMO code:<! -- Ctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt -->

Picture 1 picture 2 picture 3 picture 4

• 1
• 2
• 3
• 4

[Ctrl + A select all Note: If you need to introduce external JS, You need to refresh it to execute]

The behavior layer is implemented by JS. The work here is just to build a simple skeleton. To make it beautiful and meet the design requirements, we must play the powerful role of CSS.
After JS compilation, it can be reused next time, but it is not so lucky to write CSS. Every time a designer may make a different style of appearance, you have to rewrite the CSS code, it is really not a simple task to achieve precise CSS positioning and maintain good compatibility, but also to maximize its optimization.