Share the focus map in the Flight theme (based on JQ)

Visual Design five thousand four hundred and forty-three 13 years ago (2010-10-13)

About this Focus graph There is nothing to say, there are too many online. But I haven't found a suitable one. Now this is Dreamy theme The upgrade version of, although it looks exactly the same. In fact, many extensions have been made to optimize the structure and JS part. You can select three animation modes (left and right scrolling, up and down scrolling, fade in and fade out). The execution time can be set. The size can be customized for easy application. You can choose whether to switch automatically. You'd better write the code. There is nothing to say.
 

  1. /*Parameters:
  2. ------------------------------------------------------------------------
  3. Obj: object to be switched [ID, Class]
  4. Animation: Set the switching method [left, top, fade]
  5. Time: set the interval time between each animation execution [unit: ms)]
  6. Speed: set the execution time of each animation [unit: ms]
  7. Auto: set whether to display automatic switching [optional values: true, false]
  8. CssName: additional class name [custom focus map container style, can be left blank]
  9. -------------------------------------------------------------------------
  10. //Example:
  11. -------------------------------------------------------------------------
  12. <div id="ifocus">
  13.     <ul class="ifocus_list">
  14. <li><a href="# 1"><img src="images/01. png" alt="Picture 1"/></a></li>
  15. <li><a href="# 2"><img src="images/02. png" alt="Picture 2"/></a></li>
  16. <li><a href="# 3"><img src="images/03. png" alt="Picture 3"/></a></li>
  17.     </ul>
  18. </div>
  19. -------------------------------------------------------------------------
  20. //example1.jQFocus("#ifocus","left",2000,500,true);
  21. -------------------------------------------------------------------------
  22. //example2.jQFocus("#ifocus","top",2000,500,true,"border_red");
  23. ------------------------------------------------------------------------*/
  24.  
  25. function   jQFocus ( obj , animation , time , speed , auto , cssName ) {
  26.     var   t = n = zero , li =$ ( obj + " li " ) , count = $ ( obj + " li " ) . size () ;
  27.         _ width = $ ( obj ) . width () , _ height = $ ( obj ) . height () ;
  28.         $ ( obj ) . css ({ width : ( _ width ) + " px " , height : _ height + " px " }) . attr ( " class " , cssName ) ;
  29.         $ ( " <div class='ifocus_ info'></div> " ) . appendTo ( obj ) ;
  30.         $ ( " <span class='ifocus_ title'></span> " ) . appendTo ( obj ) . html ( $ ( " .ifocus_ list li:first-child " ) . find ( " img " ) . attr ( ' alt ' )) ;
  31.     var   num = ' <ul class="ifocus_control"> ' ;
  32.         for ( var   i = zero ; i < count ; i ++ ){ num += ' <li> ' + ( i + one ) + ' </li> ' } ;
  33.         num += ' </ul> ' ;
  34.         $ ( obj ) . append ( num ) ;
  35.         $ ( obj + " .ifocus_ control li:first-child " ) . addClass ( " current " ) ;
  36.         $ ( " .ifocus_ title " ) . click ( function (){ window . open ( $ ( " .ifocus_ list a:first-child " ) . attr ( ' href ' ) , " _ blank " )}) ;
  37.     $ ( obj + " .ifocus_ control li " ) . click ( function ()   {
  38.             var   i = $ ( this ) . text () - one ;
  39.                 n = i ;
  40.                 if   ( i >= count ) return ;
  41.                 animation = animation . substring () ;
  42.                 switch ( animation )   {
  43.                     case   " left " :
  44.                         $ ( obj + " .ifocus_ list " ) . css ({ width : ( _ width * count ) + " px " , height : _ height + " px " }) ;
  45.                         $ ( obj + " .ifocus_ list li " ) . css ({ float : " left " , height : _ height + " px " }) ;
  46.                         $ ( obj + " .ifocus_ list " ) . animate ({ left :- ( _ width * i )} , speed ) ;
  47.                     break ;
  48.                     case   " top " :
  49.                         $ ( obj + " .ifocus_ list " ) . animate ({ top :- ( _ height * i )} , speed ) ;
  50.                     break ;
  51.                     case   " fade " :
  52.                         $ ( obj + " .ifocus_ list li " ) . filter ( " :visible " ) . fadeOut ( speed ) . parent () . children () . eq ( i ) . fadeIn ( speed ) ;
  53.                 }
  54.                 $ ( " .ifocus_ title " ) . html ( $ ( " .ifocus_ list a " ) . eq ( i ) . find ( " img " ) . attr ( ' alt ' )) ;
  55.                 $ ( this ) . addClass ( " current " ) . siblings () . removeClass ( " current " ) ;
  56.         }) ;
  57.         if ( auto == true   ) {
  58.             showAuto = function   (){
  59.                 n = n >= ( count - one ) ? zero : ++ n ;
  60.                 $ ( obj + " .ifocus_ control li " ) . eq ( n ) . trigger ( ' click ' ) ;
  61.             }
  62.             t = setInterval ( " showAuto() " , time ) ;
  63.             $ ( obj ) . hover ( function (){ clearInterval ( t )} , function (){ t = setInterval ( " showAuto() " , time ) ; }) ;    
  64.         }
  65. }

There is nothing to say about the code. Those who know JQ can understand. I can't understand what I can't understand. The example is at the head of the article;