Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Untitled Page </title>
<Link rel = "Stylesheet" type = "text/css" href = "Result-Css/reset/reset-min.css"/>
<Style type = "text/css">
. W_con {width: 400px; height: 160px; overflow: hidden; border: 1px solid #333 ;}
# W_slid {width: 100% ;}
# W_slid li {width: 100%; height: 40px ;}
Li. a {background: # ffc000 ;}
Li. B {background: #56 aaff ;}
Li. c {background: #0 fffaa ;}
Li. d {background: #0 ffffa ;}
Li. e {background: # ffff56 ;}
</Style>
<Script type = "text/javascript" src = "Result-JavaScriptOrJQuery/jquery/jquery-1.7.2.js"> </script>
</Head>
<Body>
<Div class = "w_con" id = "w_con">
<Ul id = "w_slid">
<Li class = "a"> </li>
<Li class = "B"> </li>
<Li class = "c"> </li>
<Li class = "d"> </li>
<Li class = "e"> </li>
</Ul>
</Div>
<Script type = "text/javascript">
Function slide (){
Var $ w_slid = $ ('# w_con ');
Console. log ($ w_slid );
Var Timer;
$ W_s0000.hover (function (){
ClearInterval (Timer );
}, Function (){
Timer = setInterval (function (){
SlideFadeIn ($ w_slid );
},3000 );
}). Trigger ("mouseleave ");
}
Function slideFadeIn (obj ){
Var $ self = obj. find ('ul: first ');
Var $ height = $ self. find ('li: first '). height ();
Console. log ($ height );
$ Self. animate ({
'Margintop': + $ height + 'px ',
},1200, function (){
Export self.css ({marginTop: 0}). find ("li: first"). appendTo ($ self );
$ Self. find ("li: first"). hide ();
$ Self. find ("li: first"). fadeIn ("slow ");
});
}
$ (Function (){
Slide ();
});
</Script>
</Body>
</Html>