The focus picture switching effect is probably very familiar to the front-end. There should be many ways to implement it. One of the commonly used ones in work is described as follows:
How to synchronize the current digital navigation with the display of pictures?
There are two areas here, the picture switching area and the digital navigation area; they correspond to two loop functions respectively; plays(value) and setBg(value);
When the picture loop switches to the second picture, at this time The current state of the digital navigation is also changed to the second position to achieve a synchronization effect. The key here is to pass the same parameter value to them; and this task is handed over to the function Mea(value);
The pictures should be automatically switched. After the last picture is displayed in the loop, it will return to the first picture. This is done using the function auto(); but auto() only makes the judgment that the parameter n is incremented and loops, and there is no power. Support, it can't do anything.
At this time, the function setAuto() comes with setInterval(). It is the engine device of the entire system. It executes auto() every certain time; corresponding to the parameter n, it is also constantly Incremental change; n is passed to the function Mea(n);
The last interactive behavior, when the mouse slides over, the picture switching area and the digital navigation area stay in the current state, don't forget the function mouse(n), this is It is its credit;
In this way, several function brothers, divided the labor and cooperated, performed their respective duties, and completed the work brilliantly;
1.html
The code is as follows:
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("a");
function setBg(value){//Number area switching, add class "on" to the current element, clear the classes of other elements;
for(var i=0;i}
function plays(value ){//Picture area transformation
try//try...catch can test errors in the code. The try section contains the code that needs to be run, while the catch section contains the code that runs when an error occurs.
{
with (jfocuspic)//Add filter effects for IE;
{
filters[0].Apply();//Before starting a dynamic effect, you need to equip it (Apply), the Apply event is used to generate a filter effect.
for(i=0;ifilters[0].play();//The play() method is used to play dynamic effects. Before this, filter styles have been added to the picture layer in the #jfocus_pic style;
}
}
catch(e)
{
for(i=0;i{
i==value?imglist[i].style.display="block":imglist[i].style.display="none";//Display the current image, Hide other pictures;
}
}
}
function mouse(n){
for(var i=0;i(function( n){
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}//Stop automatic switching after the mouse passes and give function Mea() Pass a current parameter n
Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();}
})(i);
}
}
function Mea(value){
n=value;
mouse();
setBg(value);
plays(value);
}
function auto(){/ /The increment of parameter n is the key to automatic rotation of pictures;
n;
if(n>Num.length-1)n=0;
Mea(n);
}
function setAuto(){autoStart=setInterval("auto()", 2000)}//Every 2000 milliseconds, the auto() function is executed; each time it is executed, the parameter n is incremented by 1
setAuto();// Call function
Demo code:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
