WeChat official account

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

Visual Design eight thousand four hundred and eighty-four 15 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: