Practical js focus map switching effect, separation of structure and behavior_javascript skills

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

Copy code The code is as follows:

Picture 1
Picture 2
< ;a href="#">Picture 3
Picture 4

• 1


• 2


• 3


• 4

>
Copy code

The 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("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:

<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> <p> <meta content="text/html; charset=gb2312"> </p> <style type="text/css"><!-- .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;margin-bottom:20px;} #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;} --></style> <div class="jfocus"> <div id="jfocuspic"> <a href="#" style="display: block;">Picture 1</a> <a href="#">Picture 2</a> <a href="#">Picture 3</a> <a href="#">Picture 4</a> </div> <ul id="jfocusnum"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <br><input onclick="runEx('runcode10313')" type="button" value="运行代码"><input onclick="doCopy('runcode10313')" type="button" value="复制代码"> <input onclick="doSave(runcode10313)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl A Select all Note: </a>If you need to introduce external Js, you need to refresh it to execute </div>]<br> <br>The behavior layer is made of js To achieve this, the work here is just to build a simple skeleton. If you want to make the renderings more beautiful and meet the design requirements, you must use the powerful role of CSS. <script type="text/javascript" language="JavaScript">// <![CDATA[ function $(id){return document.getElementById(id);} var n=0; var Num=$("jfocusnum").getElementsByTagName("li"); var imglist=$("jfocuspic").getElementsByTagName("a"); function setBg(value){ for(var i=0;i<Num.length;i++) Num[i].className=(value==i)?"on":""; } function plays(value){ try { with (jfocuspic) { filters[0].Apply(); for(i=0;i<Num.length;i++)i==value?children[i].style.display="block":children[i].style.display="none"; filters[0].play(); } } catch(e) { for(i=0;i<Num.length;i++) { i==value?imglist[i].style.display="block":imglist[i].style.display="none";//使当前图片显示，隐藏其他图片； } } } function mouse(n){ for(var i=0;i<Num.length;i++){ (function(n){ Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);} Num[i].onmouseout=imglist[i].onmouseout=function(){setAuto();} })(i); } } function Mea(value){ n=value; mouse(); setBg(value); plays(value); } function auto(){ n++; if(n>Num.length-1)n=0; Mea(n); } function setAuto(){autoStart=setInterval("auto()", 2000)} setAuto(); // ]]></script>After the js is compiled, it can be reused next time, but you are not so lucky when writing css. Each time the designer may make a different style of appearance, so you have to rewrite the css code, and to implement css It is really not a simple matter to accurately position and maintain good compatibility, but also to maximize optimization.