JQuery rolling carousel and jquery Rolling

JQuery rolling carousel and jquery Rolling

Css:

* {Margin: 0; padding: 0 ;}
Body {font-size: 12px; line-height: 24px; text-algin: center ;}
A {color: # fff; text-decoration: none ;}
A: hover {color: # ff0000 ;}

. Banner {width: 400px; height: 50px; overflow: hidden; position: relative; border: 1px solid # ccc; box-shadow: 2px 2px 10px # CD919E; background-image: -moz-linear-gradient (top, # f05e6f, # c9394a); background-image:-webkit-gradient (linear, left top, left bottom, color-stop (0, # f05e6f), color-stop (1, # c9394a); filter: progid: DXImageTransform. microsoft. gradient (startColorstr = '# 8fa1ff', endColorstr = '# f05e6f', GradientType = '0');/* IE */}

. Banner ol {position: absolute; left: 30px; list-style: none ;}
. Banner ol li {font-size: 12px; line-height: 24px; overflow: hidden ;}

JQ:

$ (Function (){
Var index = 0;
Var timer;
Var ols = $ ('# content ol ');
Var liLen = ols. find ('lil'). length; // obtain the number of all li resources.
If (liLen> 1 ){
$ ('# Content'). hover (function (){
ClearInterval (timer); // stop rolling
}, Function (){
Timer = setInterval (function (){
Var lis = ols. find ('li: first ');
Var lihei = lis. height (); // obtain the li height

// Calculate the li position. Each time a li height is scrolled up, the li height is scrolled down.-LiheiChangeLihei
Lis. animate ({marginTop:-lihei + 'px '}, 500, function (){

// Set it to the end of ol after scrolling.
Lis.css ('margintop ', 0). appendTo (ols );
});
},3000 );
}). Trigger ('mouseleave ');
}
});

 

Html:

<Div id = "content" class = "banner">
<Ol>
<Li> <a href = "#"> pandatv wine FAIRY: Flame breathing, drunk cloud, drunk boxing, fire and soil storms </a> </li>
<Li> <a href = "#"> Niutou leader: shock wave, war trample, durable halo, and reborn </a> </li>
<Li> <a href = "#"> Shadow Hunters: Healing waves, enchanting techniques, snake guard, and the ultimate Lich virus trick </a> </li>
<Li> <a href = "#"> doomsday MESSENGER: swallowed up, scorched earth, dead, and dead </a> </li>
</Ol>
</Div>