Focus diagram switching effect, for the front end, I am afraid to be familiar with, the way to achieve it should have a variety of work commonly used, described as follows:
How do I keep the current digital navigation synchronized with the display of the picture?
There are two regions, picture switching area and digital navigation area, corresponding to two cyclic functions, plays (value) and SETBG (value);
When the picture loops to the 2nd, the current state of the digital navigation is also transformed to the position of 2nd, so as to achieve a synchronization effect, where the key is to pass them the same parameter value, and this task is given to the function mea (value);
The picture should be automatically switched, and when the loop is displayed to the last picture, it is returned to the first image, which is done with the function auto (), but auto () only makes the argument n increment cycle, without power support, it can do nothing,
At this time, the function Setauto () comes with setinterval (), it is the engine of the whole system, every time, the implementation of Auto (), corresponding to the parameter n also constantly increase the change, N and passed to the function mea (n);
The last interaction behavior, when the mouse is slippery, the picture switch area and the digital navigation area stay in the current state, do not forget the function mouse (n), this is its credit;
So, a few function brothers, division of work, their respective roles, excellent completion of this task;
1.html
Copy Code code as follows:
<div class= "Jfocus" >
<div id= "Jfocuspic" >
<a href= "#" style= "Display:block;" > Picture One </a>
<a href= "#" > Picture two </a>
<a href= "#" > Picture three </a>
<a href= "#" > Picture four </a>
</div>
<ul id= "Jfocusnum" >
<li class= "on" >1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
2.css
Copy Code code 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;o Verflow: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 code as follows:
function $ (ID) {return document.getElementById (ID);}
var n=0;
var num=$ ("Jfocusnum"). getElementsByTagName ("Li");
var imglist=$ ("Jfocuspic"). getElementsByTagName ("a");
function SETBG (value) {//numeric area switch, add Class class "on" to current element, clear classes of other elements;
for (Var i=0;i<num.length;i++) num[i].classname= (value==i)? On ":";
}
function plays (value) {//Picture region transformation
Try//try...catch can test errors in your code. The try section contains the code that needs to be run, and the catch part contains the code that runs when the error occurs.
{
With (Jfocuspic)//For IE add filter effect;
{
Filters[0]. Apply ()//before starting a dynamic effect, you need to equip (apply), and the Apply event is used 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 ();//play () method is used to play dynamic effects. Before that, a filter style has been added to the picture 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";//make the current picture display, hide other pictures;
}
}
}
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 automatically switching after the mouse passes and give the 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 () {//parameter n increases the key to automatically rotate the picture;
n++;
if (n>num.length-1) n=0;
Mea (n);
}
function Setauto () {Autostart=setinterval ("Auto ()", 2000)}//Every 2000 milliseconds, the Auto () functions are performed once, and the parameter n increments by 1 every time you execute it.
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;o verflow: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" > Picture one picture two pictures threePicture four </div> <ul id= "Jfocusnum" > <li class= "on" >1</li> <li>2</li> <li>3</l i> <li>4</li> </ul> <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= ' no NE ";//make current picture display, hide other pictures;}} function Mouse (n) {for (Var i=0;i<num.length;i++) {(function (n) {num[i].onmouseover=i Mglist[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 ()")} Setauto (); ]]></script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Behavior layer is achieved by JS, the work here is just a simple skeleton, if you want to make the effect of beautiful and meet the design requirements, will play the powerful role of CSS.
JS, the next time you can reuse, but writing CSS is not so lucky, every time designers may make a different style of appearance, so that you have to rewrite the CSS code, and to achieve the precise positioning of CSS and maintain good compatibility, but also to maximize the optimization, it is really not a simple thing.
