A practical focus map switching effect encapsulated by javascript_javascript skills

So I changed it on the original basis, encapsulated it, and made further optimizations, so that the same page can use multiple such effects. There is no change in xhtm and css. Interested friends can follow it on js Compare the previous code to make it easier to understand and master.
If you have any questions or suggestions, please reply＠&＠
1.xhtml

Copy code The code is as follows:

 

   Picture one
                                                                                                                                                                                                                                                                              ;/a>
                                                                                             li class="on">1
                                                                                                                                                                                  🎜>

2.css

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,tag){var re=(id&&typeof id!="string") ?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}//Get element objectfunction FocusImg(focbox,picobj,numbox,numobj , time){var n=0;var imglist=$(focbox,picobj);var Num=$(numbox,numobj);

function setBg(value){for(var i=0;ifunction plays(value ){
if(document.all) $(focbox).filters[0].Apply();//Filter
for(i=0;iif(document.all) $(focbox).filters[0].play( );
}
function mouse(n){//Set events after the mouse passes and leaves;
for(var i=0;i (function (n){
Num[i].onmouseover=imglist[i].onmouseover=function(){clearInterval(autoStart);Mea(n);}
Num[i].onmouseout=imglist[i] .onmouseout=function(){setAuto();}
            })(i); );plays(value);}
function auto(){n ;if(n>Num.length-1)n=0; Mea(n);}
function setAuto(){autoStart=setInterval( function(){auto();},time)}
setAuto();
}


Call the function after xhtml and pass in the object parameters:

Full demo code:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Encapsulates practical focus map switching effect, separated js script</title> <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;} #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;"> </a>Picture 1<a href="#"> </a>Picture 2<a href="#"> </a>Picture 3<a href="#"> </a>Picture 4</div> <ul id="jfocusnum"> <li class="on"> </li>1<li> </li>2<li> </li>3<li> </li>4</ul> </div>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn