WeChat official account

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

Visual Design eight thousand one hundred and fifty-six 14 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.

/*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 ) ; }) ;
}
}

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;

Share with friends:

Six Outlaws for Web Designers

Dear user, are you really satisfied?

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

Related articles

Small screen mobile device web page design considerations

Google User Experience Design Guidelines

AI file cannot find the linked file, select Replace to select another file, or select Ignore to keep the link unchanged

UI design of a music player interface

Realize full screen FLASH to automatically adapt to the size of the browser

Dear user, are you really satisfied?