Example Analysis of jquery plug-in bxslider usage, jquerybxslider

Example Analysis of jquery plug-in bxslider usage, jquerybxslider

This example describes the jquery plug-in bxslider usage. Share it with you for your reference. The usage is as follows:

First, call the corresponding js file:

<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.bxslider.js"></script>

JQuery code:

$ (Function () {$ ('# marquee '). bxSlider ({mode: 'vertical ', // The default value is horizontal displaySlideQty: 1, // display the number of li moveSlideQty: 1, // The number of moving li captions: true, // auto: true, controls: false // hide left and right buttons });});

The HTML structure is as follows:

<Div style = "width: pixel PX; height: 296px; float: left; overflow: hidden; margin-left: 200px; "> <ul id =" marquee "> <li>  </li>  </li> </ul> </div>

CSS defines the Left and Right button styles:

.bx-prev{ width:12px; height:26px; background:#f00;text-indent: -999999px;z-index: 999; position: absolute; float:left; left:455px; top:110px;}.bx-next{ width:12px; height:26px; background:#f00; text-indent: -999999px;z-index: 999; position: absolute; top:110px;left:-15px;}

Parameter description:

BxSlider detailed configuration parameters:
BxSlider has many configuration parameters, allowing you to produce a variety of slider effects using parameters:

Mode: 'horizontal ', // 'horizontal', 'vertical ', and 'fade' define the direction of slider scrolling. Three values are available.
InfiniteLoop: true, // true, false-display first slide after last Infinite Loop
HideControlOnEnd: false, // true, false-if true, will hide 'Next' control on last slide and 'prev' control on first if set to true, "next" will be hidden in the last slide, so "prev" will be displayed in the front slide"
Controls: true, // true, false-previous and next controls show "previous" and "next" buttons
Speed: 500, // integer-in MS, duration of time slide transitions will occupy speed, in milliseconds
Easing: 'swing ', // used with jquery. easing.1.3.js-see http://gsgd.co.uk/sandbox/jquery/easing/ for available options
Pager: true, // true/false-display a pager
PagerSelector: null, // jQuery selector-element to contain the pager. ex: '# pager'
PagerType: 'full', // 'full', 'short '-if 'full' pager displays 1, 2, 3... if 'short 'pager displays 1/4 is set to full, 1, 2, 3 ......, If short is set, 1/4 is displayed.
PagerLocation: 'bottom ', // 'bottom', 'top'-location of the position of the pager page number
PagerShortSeparator: '/', // string-ex: 'of' pager wocould display 1 of 4 Page Separators
PagerActiveClass: 'pager-active', // string-classname attached to the className of the current page number of the active pager link
NextText: 'Next', // string-text displayed for 'Next' control text next to the page
NextImage: '', // string-filepath of image used for 'Next' control. ex: 'images/next.jpg 'You can set the next page as an image
NextSelector: null, // jQuery selector-element to contain the next control. ex: '# next'
PrevText: 'prev', // string-text displayed for 'previous' control THE text of the previous PAGE
PrevImage: '', // string-filepath of image used for 'previous 'control. ex: 'images/prev.jpg 'picture of the previous page
PrevSelector: null, // jQuery selector-element to contain the previous control. ex: '# next'
Captions: false, // true, false-display image captions (reads the image 'title' tag) Whether to display the image title and read the content of the image's title attribute.

CaptionsSelector: null, // jQuery selector-element to contain the captions. ex: '# captions'
Auto: false, // true, false-make slideshow change automatically automatic slide scrolling
AutoDirection: 'Next', // The Order of 'Next', 'prev'-ction in which auto show will traverse auto scroll
AutoControls: false, // true, false-show 'start' and 'stop' controls for auto show
AutoControlsSelector: null, // jQuery selector-element to contain the auto controls. ex: '# auto-controls'
AutoStart: true, // true, false-if false show will wait for 'start' control to activate
AutoHover: false, // true, false-if true show will pause on mouseover setting the mouse mouseover will cause automatic scroll pause
AutoDelay: 0, // integer-in MS, the amount of time before starting the auto show
Pause: 3000, // integer-in MS, the duration between each slide transition time
StartText: 'start', // string-text displayed for 'start' control start button text
StartImage: '', // string-filepath of image used for 'start' control. ex: 'images/start.jpg'
StopText: 'stop', // string-text displayed for 'stop' control the text of the stop button
StopImage: '', // string-filepath of image used for 'stop' control. ex: 'images/stop.jpg 'picture of the stop button
Ticker: false, // true, false-continuous motion ticker mode (think news ticker)
// Note: autoControls and autoControlsSelector apply to ticker!
TickerSpeed: 5000, // integer-has an inverse effect on speed. therefore, a value of 10000 will
// Scroll very slowly while a value of 50 will scroll very quickly.
TickerDirection: 'Next', // 'Next', 'prev'-direction in which ticker show will traverse
TickerHover: false, // true, false-if true ticker will pause on mouseover
WrapperClass: 'bx-wrapper ', // string-classname attached to the slider wraper
StartingSlide: 0, // integer-show will start on specified slide. note: slides are zero based!
DisplaySlideQty: 1, // integer-number of slides to display at once
MoveSlideQty: 1, // integer-number of slides to move at once
RandomStart: false, // true, false-if true show will start on a random slide

I hope this article will help you with jQuery programming.