Banner Carousel Seamless Scroll Balm JQ code

Html:

<div class= "box" >

<ul>

<li>11111</li>

<li>22222</li>

</ul>

</div>

JQ:

Call: $ (function () {

SetInterval (Functon () {

Scroll ($ (". Box ul"));

},1000);

})

Package: function Scroll (obj) {

var h=obj.find ("Li"). Height (); Get the height of each Li

Obj.animate ({"Margin-top":-h},function () {//Whole UL scrolls up one Li's height, the positive or negative of H determines the direction of scrolling

Obj.find ("Li"). EQ (0). Appendto (obj); Put the first Li of UL to the last

Obj.css ("Margin-top", 0); UL position restore, looks like a seamless scrolling

})

}

Note: If you are rolling seamlessly up and down, use Margin-top, if you scroll left and right, use Margin-left, and then get the width of each li. Encapsulation is to reduce the amount of code when calling repeatedly.

Banner Carousel Seamless Scroll Balm JQ code