Examples of multiple thumbnail scrolling plug-ins Based on jquery

This article will give you a detailed introduction to the examples of multiple thumbnail-based scrolling plug-ins Based on jquery. I hope this method will be of great help to you.

Recently, I wrote a jquery plug-in for horizontal and vertical scrolling of multiple images, for details, refer to my previous article xdmJS application JS image loop carousel (picture scrolling). The plug-in content is as follows:

The Code is as follows:

Copy code

/* @ PlugName: jquery. breviaryScroll. js @ Company: baidu.com @ Author: by xudeming@baidu.com @ Data: 2013-06-08 @ Blog: http://www.css119.com */ (Function ($ ){ $. Fn. breviaryScroll = function (options ){ /* Define the default value */ Var defaults = { DisplayLength: 3, // Number of displayed images Speed: 200, // Sliding speed DisableClassName: "btn-disable", // the style of the button that cannot be clicked ChildTagName: "li", // Tag Name of the child element ChildMargin: "3px", // gap between child elements BtnPrev: "# breviaryPrev", // button name of the previous page BtnNext: "# breviaryNext", // button name for the next page ScrollNum: 1, // number of images that are rolled at a time Direction: "left" // The scroll direction of the image. The value is left or top. }; Var opts = $. extend (defaults, options ); $ (This). each (function (){ Var I = 0, Obj = $ (this ), SNum = obj. find (opts. childTagName). length, Prev = $ (opts. btnPrev ), Next = $ (opts. btnNext ), Dir = opts. direction, DirObj = {}, SLiWidthHeight = 0; // Reset Obj.css ("left", 0 ); Prev. addClass (opts. disableClassName ); Next. removeClass (opts. disableClassName ); // Calculates the outer width when horizontal scrolling. If (dir = "left "){ SLiWidthHeight = obj. find (opts. childTagName). outerWidth () + parseInt (opts. childMargin ); Obj. width (sNum * sLiWidthHeight + "px "); // You do not need to define the style. The auto-adaptive width is based on the number of images to be displayed, so that you do not have to modify the style after modifying the number of images. Obj. parent (). width (opts. displayLength * sLiWidthHeight + parseInt (opts. childMargin) + "px "); } // Calculates the height of the outer layer during vertical scrolling. Else if (dir = "top "){ SLiWidthHeight = obj. find (opts. childTagName). outerHeight () + parseInt (opts. childMargin ); Obj. height (sNum * sLiWidthHeight + "px "); // You do not need to define a style. The height is automatically adjusted based on the number of images to be displayed, so that you do not have to modify the style after modifying the number of images. Obj. parent (). height (opts. displayLength * sLiWidthHeight + parseInt (opts. childMargin) + "px "); } // When the total number of thumbnails is smaller than the displayed number, disable all buttons. If (sNum <= opts. displayLength ){ Next. addClass (opts. disableClassName ); } /* When the total number of thumbnails is greater than the displayed Number */ Else { Prev. unbind ("click "); Prev. click (function (){ If (I> 0 ){ I-= opts. scrollNum; DirObj [dir] =-I * sLiWidthHeight + "px "; Next. removeClass (opts. disableClassName ); Obj. animate (dirObj, opts. speed, Function (){ If (I = 0 ){ Prev. addClass (opts. disableClassName ); } } ); } }); Next. unbind ("click "); Next. click (function (){ If (I <sNum-opts.displayLength ){ I + = opts. scrollNum; DirObj [dir] =-I * sLiWidthHeight + "px "; Prev. removeClass (opts. disableClassName ); Obj. animate (dirObj, opts. speed, Function (){ If (I> = sNum-opts.displayLength ){ Next. addClass (opts. disableClassName ); } } ); } }); } }); } }) (JQuery)

You can set many parameters, such:

DisplayLength: 3, // Number of displayed images
Speed: 200, // Sliding speed
DisableClassName: "btn-disable", // the style of the button that cannot be clicked
ChildTagName: "li", // Tag Name of the child element
ChildMargin: "3px", // gap between child elements
BtnPrev: "# breviaryPrev", // button name of the previous page
BtnNext: "# breviaryNext", // button name for the next page
ScrollNum: 1, // number of images that are rolled at a time
Direction: "left" // The scroll direction of the image. The value is left or top, because this effect is quite common and I will share it with you now.
The code for horizontal scrolling is as follows (you can change the parameters of the plug-in to view different effects, such as changing scrollNum to 2 ):

The Code is as follows:

Copy code

Ul, li {margin: 0; padding: 0; list-style: none} A: focus {outline: none} . Clearfix {* zoom: 1} . Clearfix: after {display: block; visibility: hidden; clear: both; height: 0; content: '.'; font-size: 0} . Pr {position: relative} . Pa {position: absolute} . Breviary-box. prev ,. breviary-box. next {float: left; display: inline; width: 14px; height: 62px; background: # a4a4a4; text-indent:-9999px; position: relative} . Breviary-box. btn-disable {background: # eee} . Breviary-box. prev B ,. breviary-box. next B {position: absolute; right: 5px; top: 28px; width: 0; height: 0; font-size: 0; overflow: hidden; border: 5px dashed transparent; border-right: 5px solid # ddd} . Breviary-box. next B {border: 5px dashed transparent; border-left: 5px solid # ddd; right: 0} . Breviary-box. image-box {float: left; display: inline; height: 62px; overflow: hidden} . Breviary-box li {float: left; display: inline; width: 62px; height: 62px; background: # a4a4a4; margin-left: 3px; text-align: center; line-height: 62px; overflow: hidden; cursor: pointer} . Breviary-box img {max-width: 62px; _ width: 62px; vertical-align: middle}

Previous Page
■ 1
■ 2
■ 3
■ 4
■ 5
■ 6
■ 7
■ 8
■ 9
. Next page

The Code is as follows:	Copy code
. JQuery (function (){ JQuery ("# imageList"). breviaryScroll ({scrollNum: 1, displayLength: 4, direction: "left "}); })

The code for vertical scrolling is as follows (you can change the parameters of the plug-in to view different effects, such as changing scrollNum to 2 ):

The Code is as follows:

Copy code

Ul, li {margin: 0; padding: 0; list-style: none} A: focus {outline: none} . Clearfix {* zoom: 1} . Clearfix: after {display: block; visibility: hidden; clear: both; height: 0; content: '.'; font-size: 0} . Pr {position: relative} . Pa {position: absolute} . Breviary-box. prev ,. breviary-box. next {display: block; width: 62px; height: 14px; background: # a4a4a4; text-indent:-9999px; position: relative} . Breviary-box. btn-disable {background: # eee} . Breviary-box. prev B ,. breviary-box. next B {position: absolute; right: 25px; top: 0; width: 0; height: 0; font-size: 0; overflow: hidden; border: 5px dashed transparent; border-bottom: 5px solid # ddd} . Breviary-box. next B {border: 5px dashed transparent; border-top: 5px solid # ddd; top: 5px} . Breviary-box. image-box {width: 62px; overflow: hidden} . Breviary-box li {width: 62px; height: 62px; background: # a4a4a4; margin-top: 3px; text-align: center; line-height: 62px; overflow: hidden; cursor: pointer} . Breviary-box img {max-width: 62px; _ width: 62px; vertical-align: middle}

Previous Page
■ 1
■ 2
■ 3
■ 4
■ 5
■ 6
■ 7
■ 8
■ 9
. Next page

The Code is as follows:	Copy code
. JQuery (function (){ JQuery ("# imageList"). breviaryScroll ({scrollNum: 1, displayLength: 4, direction: "top "}); })