:
Implementation Code:
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> Jquery automatic carousel effect </title>
<Script src = "js/jquery-1.6.2.min.js" type = "text/javascript"> </script>
<Style>
. Spanhide {display: none ;}
# Top a: hover {color: red ;}
</Style>
</Head>
<Body>
<Div id = "main">
<Div id = "top">
<A href = "javascript: void (0)"> 1 </a>
<A href = "javascript: void (0)"> 2 </a>
<A href = "javascript: void (0)"> 3 </a>
<A href = "javascript: void (0)"> 4 </a>
<A href = "javascript: void (0)"> 5 </a>
</Div>
<Div id = "tbody">
<Span> </span>
<Span class = "spanhide"> </span>
<Span class = "spanhide"> </span>
<Span class = "spanhide"> </span>
<Span class = "spanhide"> </span>
</Div>
</Div>
</Body>
<Script type = "text/javascript">
$ (Function (){
Var I = 0;
Var f = 0;
Var t;
Var tops = $ ("# top ");
Var tl = tops. length;
Var bodys = $ ("# tbody span ");
Tops. mouseover (function (){
I = $. inArray (this, tops );
Bodys. hide (). eq (I). show ();
I ++;
I = I> = tl? 0: I;
If (f = 1 ){
T = setTimeout (mmover, 2000 );
}
Else {
Stop ();
}
F = 0;
});
Bodys. mouseover (function (){
Stop ();
});
Bodys. mouseout (function (){
T = setTimeout (mmover, 2000 );
});
Tops. mouseout (function (){
T = setTimeout (mmover, 2000 );
});
Mmover ();
Function stop (){
ClearTimeout (t );
}
Function mmover (){
F = 1;
Tops. eq (I). mouseover ();
}
});
</Script>
</Html>