jquery Plug-in Bxslider usage Example Analysis _jquery

Source: Internet
Author: User
Tags prev

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 
  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> 

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;
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.