Jquery seamless continuous scrolling code

Usually, when we are doing web page layout, in order to achieve the display of picture scrolling or text scrolling in a certain place, this is the so-called "marquee effect". In the past, Blueleaf used html tag marquee to do the marquee effect. Marquee is not perfect. If the width or height of a layer is too long, the gap in the middle will be very ugly; Now used by Blueleaf jquery The seamless continuous scrolling code is used to achieve the marquee effect. This section of jquery seamless continuous scrolling code can be set freely. The scrolling effect is left, right, up, and down. If you need to copy the following code to where you need it, and use it with a little modification. This is a section of jquery code, which needs the support of the jquery library.

 //The following code is copied to the JS file to call $.fn.imgscroll = function(o){ var defaults = { speed: 40, amount: 0, width: 1, dir: "left" }; o = $.extend(defaults, o); return this.each(function(){ var _li = $("li", this); _li.parent().parent().css({overflow: "hidden", position: "relative"}); //div _li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul _li.css({position: "relative", overflow: "hidden"}); //li if(o.dir == "left") _li.css({float: "left"}); //Initial size var _li_size = 0; for(var i=0;  i<_li.size();  i++) _li_size += o.dir == "left" ? _ li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true); //Elements required by the loop if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"}); _li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone()); _li = $("li", this); //Scroll var _li_scroll = 0; function goto(){ _li_scroll += o.width; if(_li_scroll > _li_size) { _li_scroll = 0; _li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }); _li_scroll += o.width; } _li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount); } //Start var move = setInterval(function(){ goto(); }, o.speed); _li.parent().hover(function(){ clearInterval(move); },function(){ clearInterval(move); move = setInterval(function(){ goto(); }, o.speed); }); }); }; $(document).ready(function(){ //Set the style name of the DIV layer here $("#gdtw").imgscroll({ Speed: 40,//Picture scroll speed Amount: 0,//Picture rolling transition time Width: 1,//The number of image scroll steps Dir: "left"//"left" or "up" Scroll left or up }); });