It mainly uses the timer principle, bind, trigger application, etc.
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> Implementation of banner switching </title>
<Style type = "text/css">
/*
* @ Description: banner switching Style
* @ Author: lanfeng (beryl)
* @ Time: 2013-02-26
*/
/* Reset */
* {Margin: 0; padding: 0 ;}
Body {font: 12px/1.5 Tahoma, '\ 5B8B \ 4f53', arial, Tahoma, helvetica, sans-serif; color: #333333; background-color: # ffffff; position: relative ;}
H1, h2, h3, h4, h5, h6 {font-size: 100%}
Address, em {font-style: normal ;}
Code, kbd, pre, samp {font-family: courier new, courier, monospace ;}
Ul, ol {list-style: none outside none ;}
Fieldset, img {border: 0 ;}
Img {vertical-align: middle}
Table {border-collapse: collapse; border-spacing: 0; font-size: inherit; * font-size: 100% ;}
Input, button, textarea, select {vertical-align: middle; font: 100% Helvetica, Arial, sans-serif; color: inherit}
. Clearfix: after {content: '.'; display: block; height: 0; clear: both; visibility: hidden ;}
. Clearfix {* zoom: 1 ;}
. Clear {font-size: 0; line-height: 0; height: 0; clear: both; visibility: hidden; overflow: hidden ;}
. D-ftab {width: 510px; height: 180px; position: relative; margin: 100px auto ;}
. D-fShow ul li {float: left; width: 510px; height: 180px ;}
. D-fShow {width: 510px; height: 180px; overflow: hidden ;}
. D-fShow img {width: 510px; height: 180px; float: left ;}
. D-fs-control {position: absolute; width: 510px; position: absolute; left: 0; bottom: 0; height: 25px; line-height: 25px;
Background: rgba (0.4, 0 );
Filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '#66000000 ',
EndColorStr = '#66000000 ');}
: Root. d-fs-control {filter: progid: DXImageTransform. Microsoft. Gradient (GradientType = 0, StartColorStr = '#66000000'
, EndColorStr = '#66000000') \ 9 ;}
. D-fs-control ul {position: absolute; bottom: 3px; right: 5px; height: 16px ;}
. D-fs-control ul li {width: 16px; height: 16px; background: #777675; border-radius: 2px 2px 2px 2px; float: left; margin-left: 5px;
Color: # dcdcdc; text-align: center; font-weight: 700; cursor: pointer; line-height: 16px; filter: alpha (opacity = 70); opacity: 0.7 ;}
. D-fs-control ul li: hover,. d-fs-control ul li. select {background: # ffffff; color: # ff6700 ;}
</Style>
<Script type = "text/javascript" src = "js/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
Var wrap = $ ('. d-ftab ');
Var imgs = wrap. find ('. d-fShow ul> li ');
Var len = imgs. length;
Var tabTime = 100;
Var outTime = 4000;
Var select = 'select ';
Var num = 0;
Var interval;
Var type = 'click ';
Var btns = wrap. find ('. d-fs-control ul> li ');
Btns. bind (type, function (){
Var _ this = $ (this );
_ This. addClass ('select'). siblings (). removeClass ('select ');
Num = _ this. prevAll (). length;
Imgs. stop (). eq (num). fadeTo (tabTime, 1 );
Imgs. not (': eq (' + num + '). filter (': visible '). fadeOut (tabTime );
Return false;
}). Eq (num). trigger (type );
Var interFunc = function (){
Num = (num + 1) % len;
Btns. eq (num). triggerHandler (type );
}
Wrap. bind ('mouseover', function (){
ClearInterval (interval );
}). Bind ('mouseout', function (){
Interval = setInterval (interFunc, outTime)
})
})
</Script>
</Head>
<Body>
<Div class = "d-ftab">
<Div class = "d-fShow">
<Ul>
<Li>
<A href = "#">
</A>
</Li>
<Li>
<A href = "#">
</A>
</Li>
<Li>
<A href = "#">
</A>
</Li>
<Li>
<A href = "">
</A>
</Li>
<Li>
<A href = "#">
</A>
</Li>
</Ul>
</Div>
<Div class = "d-fs-control">
<Ul>
<Li> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
<Li> 4 </li>
<Li class = "select"> 5 </li>
</Ul>
</Div>
</Div>
</Body>
</Html>
The effect is as follows: