A seamless rolling plug-in written by myself using jquery _ jquery-js tutorial

This article mainly introduces a seamless rolling plug-in written by myself using jquery. I personally feel pretty good. If you need it, refer to the following:



Html code:

The Code is as follows:

Seamless scroll to the right

Seamless scroll to left

• 111111111111


• 222222222222


• 3333333333333


• 4444444444444


• 5555555555555


• 6666666666666


• 7777777777777


• 8888888888888


• 9999999999999

Seamless scroll up

• 111111111111


• 222222222222


• 3333333333333


• 4444444444444


• 5555555555555


• 6666666666666


• 7777777777777


• 8888888888888


• 9999999999999

Seamless rolling and downward Rolling

• 111111111111


• 222222222222


• 3333333333333


• 4444444444444


• 5555555555555


• 6666666666666


• 7777777777777


• 8888888888888


• 9999999999999

Seamless scrolling, non-ul, li tag combination, and scroll to the right

111111111111

222222222222

3333333333333

4444444444444

5555555555555

6666666666666

7777777777777

8888888888888

9999999999999

Not moving

• 111111111111


• 222222222222


• 3333333333333


• 4444444444444


• 5555555555555


• 6666666666666


• 7777777777777


• 8888888888888


• 9999999999999

Css code:

The Code is as follows:

Ul, li, h1 {margin: 0; padding: 0; list-style-type: none ;}
Ul, p {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:

The Code is as follows:

; (Function ($ ){
Var defaults = {
Dir: "left", // none: Do not move, up: Top, right: right, down: bottom, right: left
Delay: 30, // execution time
};
$. Fn. gysContentDisplay = function (opt ){
Opt = $. extend ({}, defaults, opt );

// Global variable area
Var obj = $ (this); // current object
Obj.css ({"overflow": "hidden"}); // initialization Element
If (opt. dir = "none") return;
Var objLis = obj. children (); // child element in the object
ObjLis.css ({"overflow": "hidden "});
Var objSize = 0; // the size of the outer frame.
Var scrollEvent = "scrollLeft"; // The scroll direction of the scroll bar.
Var liTotalSize = 0, liTotalSizeOther = 0; // The size (width or height) of each li element. The total size after cloning
Var scrollSize = 0, // actual distance of the scroll bar
ScrollSizeMax = 0, // maximum distance of the scroll bar
ScrollSizeMin = 0; // minimum distance of the scroll bar
Var interval = ""; // record setInterval

If (opt. dir = "up" | opt. dir = "down") {// up/down
ObjSize = obj. innerHeight ();
ScrollEvent = "scrollTop ";
Obj.css ({"padding-top": 0, "padding-bottom": 0}). height (objSize );
}
Else if (opt. dir = "left" | opt. dir = "right") {// left and right
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 li size
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 (); // obtain the total size of all li values, and assign values in the method.

(Function (){
Var cloneCount = Math. ceil (objSize * 2/liTotalSize); // assign the number of sub-elements
Var cloneHtmlNow = "", cloneHtmlStart = obj.html (); // The original sub-element string

For (var I = 0; I <cloneCount; I ++ ){
CloneHtmlNow + = cloneHtmlStart;
}
Obj. append (cloneHtmlNow );
LiTotalSizeOther = (cloneCount + 1) * liTotalSize; // obtain the length after the child element is 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 );
});
}


// Scroll method of the 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 );

Plug-in call:

The Code is 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 "});
})