jquery Plug-in Bxslider usage Example Analysis _jquery

This example describes the jquery plug-in Bxslider usage. Share to everyone for your reference. The specific 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 section:

$ (function () { 
 $ (' #marquee '). Bxslider ({ 
  mode: ' Vertical ',//The default is horizontal 
  displayslideqty:1,//displays the number 
  of Li moveslideqty:1,//Mobile li number  
  captions:true,//automatic control 
  auto:true, 
  controls:false//Hide left-right button 
 } 
);

The HTML structure is as follows:

<div style= "width:450px; height:296px; Float:left; 
Overflow:hidden; margin-left:200px; " >
 <ul id= "marquee > <li> 
  </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 that allow you to use parameters to produce a variety of slider effects:

Mode: ' horizontal ',//' horizontal ', ' vertical ', ' fade ' defines the direction of the slider scrolling, with three values to choose from
Infiniteloop:true,//True, false-display the last infinite loop after the last slide
Hidecontrolonend:false,//True, false-if true, would hide ' next ' control in last slide and ' prev ' True, "Next" will be hidden on the last slide, so "prev" in the front of the slide
Controls:true,//True, false-previous and next controls display "previous" and "Next" buttons
speed:500,//integer-in MS, duration of time slide transitions'll 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 if you set full, the 1,2,3 will be displayed ... and if you set short, you will see 1/4.
Pagerlocation: ' Bottom ',//' bottom ', ' top '-Location of pager page number position
Pagershortseparator: '/',//String-ex: ' of ' pager would display 1 of 4 page separator
Pageractiveclass: ' pager-active ',//string-classname attached to the active pager link current page number classname
Nexttext: ' Next ',//String-text displayed for ' Next ' control on the next page of text
NextImage: ',//String-filepath of image used for ' next ' control. Ex: ' Images/next.jpg ' can set the next page as a picture
Nextselector:null,//JQuery selector-element to contain the next control. Ex: ' #next '
Prevtext: ' prev ',//String-text displayed for ' previous ' the text on the previous page
Previmage: ',//String-filepath of image used for ' previous ' control. Ex: A picture of ' images/prev.jpg ' on 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) shows the caption of the picture and reads the contents of the title property of the picture.

Captionsselector:null,//JQuery selector-element to contain the captions. Ex: ' #captions '
Auto:false,//True, False-make slideshow change automatically slide automatic scrolling
Autodirection: ' Next ',//' Next ', ' prev '-direction in which auto show would traverse the order of automatic scrolling
Autocontrols:false,//True, False-show ' start ' and ' Stop ' controls for auto show automatic scrolling control keys
Autocontrolsselector:null,//JQuery selector-element to contain the auto controls. Ex: ' #auto-controls '
Autostart:true,//True, False-if false show would wait for ' start ' control to activate
Autohover:false,//True, False-if True show would pause on mouseover setting mouse mouseover will make automatic scrolling 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 transition time
Starttext: ' Start ',///String-text displayed the text of the Start button for the ' Start ' control
Startimage: ',//String-filepath of image used for ' start ' control. Ex: Picture of the ' images/start.jpg ' Start button
Stoptext: ' Stop ',//String-text displayed text for ' Stop ' control stop button
Stopimage: ',//String-filepath of image used for ' Stop ' control. Ex: Picture of the ' images/stop.jpg ' stop button
Ticker:false,//True, False-continuous motion Ticker mode (news ticker)
Note:autocontrols and Autocontrolsselector apply to ticker!
tickerspeed:5000,//Integer-has a inverse effect on speed. Therefore, a value of 10000 would
Scroll very slowly while a value of would scroll very quickly.
Tickerdirection: ' Next ',//' Next ', ' prev '-direction in which ticker show would traverse
Tickerhover:false,//True, False-if true ticker'll pause on mouseover
Wrapperclass: ' Bx-wrapper ',//string-classname attached to the slider Wraper
startingslide:0,//Integer-show'll 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'll start on a random slide

I hope this article will help you with your jquery programming.