A seamless scrolling plugin written by yourself using jquery _jquery

Effect Chart:



HTML code:

Copy Code code as follows:

<ul id= "GUOUL1" >
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul id= "Guoul2" >
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<ul id= "Guoul3" >
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<ul id= "Guoul4" >
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>
<div id= "GUOUL5" >
<p>111111111111</p>
<p>222222222222</p>
<p>3333333333333</p>
<p>4444444444444</p>
<p>5555555555555</p>
<p>6666666666666</p>
<p>7777777777777</p>
<p>8888888888888</p>
<p>9999999999999</p>
</div>
<ul id= "Guoul6" >
<li>111111111111</li>
<li>222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
<li>5555555555555</li>
<li>6666666666666</li>
<li>7777777777777</li>
<li>8888888888888</li>
<li>9999999999999</li>
</ul>

CSS code:

Copy Code code as follows:

UL, li,h1 {margin:0; padding:0; list-style-type:none;}
ul,div {height:200px; border:1px solid red; width:300px; padding:30px;margin:10px;list-style-type:none;}
li,p {height:30px; line-height:30px; margin-top:10px; background-color:gray; color:yellow; margin-left:10px;}
#guoul1 {width:1000px; height:188px;margin:0; padding:0;}
#guoul1 li{width:300px; height:188px;margin:0; padding:0; margin-left:10px;}

JS Plug-in code:

Copy Code code as follows:

; (function ($) {
var defaults = {
Dir: "Left",//none: No move, up: On, right: R.
delay:30,//Execution Time
};
$.fn.gyscontentdisplay = function (opt) {
opt = $.extend ({}, defaults, opt);

Global variable Region
var obj = $ (this); Current Object
Obj.css ({"Overflow": "Hidden"}); Initializing elements
if (Opt.dir = = "None") return;
var objlis = Obj.children (); Child elements in an object
Objlis.css ({"Overflow": "Hidden"});
var objSize = 0; Outer frame size
var scrollevent = "ScrollLeft"; Scroll direction of scroll bar
var litotalsize = 0, litotalsizeother = 0; Size of each Li element (width or height), total size after cloning
var scrollsize = 0,//The actual distance of the scroll bar
Scrollsizemax = 0,//maximum distance of scroll bar
scrollsizemin = 0; Minimum distance of scroll bar
var interval = ""; Record SetInterval

if (Opt.dir = "Up" | | opt.dir = = "Down") {//Top/Bottom
ObjSize = Obj.innerheight ();
ScrollEvent = "ScrollTop";
Obj.css ({"Padding-top": 0, "Padding-bottom": 0}). Height (objSize);
}
else if (Opt.dir = "Left" | | opt.dir = = "Right") {//Around
ObjSize = Obj.innerwidth ();
ScrollEvent = "ScrollLeft";
Obj.css ({"Padding-left": 0, "Padding-right": 0}). width (objSize);
}
else {
Alert ("Your dir parameter is incorrect");
}

var getchildtotalsize = function (dir) {//Defines the method for obtaining the total size of Li
if (dir = "Left" | | | dir = = "Right") {
Objlis.css ("float", "left");
return function () {
Objlis.each (function () {
Litotalsize + = $ (this). Outerwidth (True);
});
}
}
else if (dir = "Up" | | dir = = "Down") {
Objlis.css ("float", "none");
return function () {
Objlis.each (function () {
Litotalsize + = $ (this). Outerheight (True);
});
}
}
} (Opt.dir);
Getchildtotalsize (); Get the total size of all Li, and assign values in the method

(function () {
var clonecount = Math.ceil (objSize * 2/litotalsize); How many times to assign child elements
var clonehtmlnow = "", Clonehtmlstart = obj.html (); The original child element string

for (var i = 0; i < Clonecount; i++) {
Clonehtmlnow + = Clonehtmlstart;
}
Obj.append (Clonehtmlnow);
Litotalsizeother = (Clonecount + 1) * litotalsize; Gets the length after the child element has been added
})();


if (Opt.dir = "Left" | | opt.dir = = "Right") {
Obj.css ({"Position": "Relative", "Z-index": 0});
Obj.children (). css ({"position": "Absolute", "Z-index": 1});
var left = 0;
Obj.children (). each (function () {
$ (this). css ({' Left ': Left + ' px ', ' top ': 0});
Left = $ (this). Outerwidth (True);
});
}


Scrolling method of scroll bar
function Scrollchange (dir) {
if (dir = "Left" | | dir = = "Up") {
Obj[scrollevent] (0);
Scrollchange = function () {
scrollsize++;
if (scrollsize >= litotalsize) scrollsize = 0;
Obj[scrollevent] (scrollsize);
}
}
else if (dir = = "Right" | | dir = = "Down") {
Scrollsizemax = litotalsizeother-objsize;
Obj[scrollevent] (Scrollsizemax);
Scrollsize = Scrollsizemax;
Scrollsizemin = scrollsizemax-litotalsize;
Scrollchange = function () {
scrollsize--;
if (scrollsize <= scrollsizemin) scrollsize = Scrollsizemax;
Obj[scrollevent] (scrollsize);
}
}
};
Scrollchange (Opt.dir);
Interval = setinterval (Scrollchange, Opt.delay);
Obj.children (). On ("MouseOver", function () {
Clearinterval (interval);
}). On ("MouseLeave", function () {
Interval = setinterval (Scrollchange, Opt.delay);
});
}
}) (JQuery);

Calls to Plug-ins:

Copy Code code as follows:

$ (function () {
$ ("#guoul1"). Gyscontentdisplay ({dir: "right"});
$ ("#guoul2"). Gyscontentdisplay ({dir: "Left"});
$ ("#guoul3"). Gyscontentdisplay ({dir: "Up"});
$ ("#guoul4"). Gyscontentdisplay ({dir: "Down"});
$ ("#guoul5"). Gyscontentdisplay ({dir: "right"});
$ ("#guoul6"). Gyscontentdisplay ({dir: "none"});
})