Share the focus map in the Flight theme (based on JQ)
-
/*Parameters: -
------------------------------------------------------------------------ -
Obj: object to be switched [ID, Class] -
Animation: Set the switching method [left, top, fade] -
Time: set the interval time between each animation execution [unit: ms)] -
Speed: set the execution time of each animation [unit: ms] -
Auto: set whether to display automatic switching [optional values: true, false] -
CssName: additional class name [custom focus map container style, can be left blank] -
------------------------------------------------------------------------- -
//Example: -
------------------------------------------------------------------------- -
<div id="ifocus"> -
<ul class="ifocus_list"> -
<li><a href="# 1"><img src="images/01. png" alt="Picture 1"/></a></li> -
<li><a href="# 2"><img src="images/02. png" alt="Picture 2"/></a></li> -
<li><a href="# 3"><img src="images/03. png" alt="Picture 3"/></a></li> -
</ul> -
</div> -
------------------------------------------------------------------------- -
//example1.jQFocus("#ifocus","left",2000,500,true); -
------------------------------------------------------------------------- -
//example2.jQFocus("#ifocus","top",2000,500,true,"border_red"); -
------------------------------------------------------------------------*/ -
-
function jQFocus ( obj , animation , time , speed , auto , cssName ) { -
var t = n = zero , li =$ ( obj + " li " ) , count = $ ( obj + " li " ) . size () ; -
_ width = $ ( obj ) . width () , _ height = $ ( obj ) . height () ; -
$ ( obj ) . css ({ width : ( _ width ) + " px " , height : _ height + " px " }) . attr ( " class " , cssName ) ; -
$ ( " <div class='ifocus_ info'></div> " ) . appendTo ( obj ) ; -
$ ( " <span class='ifocus_ title'></span> " ) . appendTo ( obj ) . html ( $ ( " .ifocus_ list li:first-child " ) . find ( " img " ) . attr ( ' alt ' )) ; -
var num = ' <ul class="ifocus_control"> ' ; -
for ( var i = zero ; i < count ; i ++ ){ num += ' <li> ' + ( i + one ) + ' </li> ' } ; -
num += ' </ul> ' ; -
$ ( obj ) . append ( num ) ; -
$ ( obj + " .ifocus_ control li:first-child " ) . addClass ( " current " ) ; -
$ ( " .ifocus_ title " ) . click ( function (){ window . open ( $ ( " .ifocus_ list a:first-child " ) . attr ( ' href ' ) , " _ blank " )}) ; -
$ ( obj + " .ifocus_ control li " ) . click ( function () { -
var i = $ ( this ) . text () - one ; -
n = i ; -
if ( i >= count ) return ; -
animation = animation . substring () ; -
switch ( animation ) { -
case " left " : -
$ ( obj + " .ifocus_ list " ) . css ({ width : ( _ width * count ) + " px " , height : _ height + " px " }) ; -
$ ( obj + " .ifocus_ list li " ) . css ({ float : " left " , height : _ height + " px " }) ; -
$ ( obj + " .ifocus_ list " ) . animate ({ left :- ( _ width * i )} , speed ) ; -
break ; -
case " top " : -
$ ( obj + " .ifocus_ list " ) . animate ({ top :- ( _ height * i )} , speed ) ; -
break ; -
case " fade " : -
$ ( obj + " .ifocus_ list li " ) . filter ( " :visible " ) . fadeOut ( speed ) . parent () . children () . eq ( i ) . fadeIn ( speed ) ; -
} -
$ ( " .ifocus_ title " ) . html ( $ ( " .ifocus_ list a " ) . eq ( i ) . find ( " img " ) . attr ( ' alt ' )) ; -
$ ( this ) . addClass ( " current " ) . siblings () . removeClass ( " current " ) ; -
}) ; -
if ( auto == true ) { -
showAuto = function (){ -
n = n >= ( count - one ) ? zero : ++ n ; -
$ ( obj + " .ifocus_ control li " ) . eq ( n ) . trigger ( ' click ' ) ; -
} -
t = setInterval ( " showAuto() " , time ) ; -
$ ( obj ) . hover ( function (){ clearInterval ( t )} , function (){ t = setInterval ( " showAuto() " , time ) ; }) ; -
} -
}
Related articles
Summary of web questionnaire entry 
Arrangement of Design Works - Part of Design Draft of Wantong Real Estate E-magazine 
Realize full screen FLASH to automatically adapt to the size of the browser 
The process of making ttf font file 
UI design of a music player interface 
What are UE, UI, UCD, UED? What is the difference between them?
