jquery plug-in bxslider usage example analysis_jquery

The example in this article describes the usage of jquery plug-in bxslider. Share it with 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 part:

$(function(){ 
 $('#marquee').bxSlider({ 
  mode:'vertical', //默认的是水平 
  displaySlideQty:1,//显示li的个数 
  moveSlideQty: 1,//移动li的个数  
  captions: true,//自动控制 
  auto: true, 
  controls: false//隐藏左右按钮 
 }); 
});

HTML structure is as follows:

<div style="width:450px; height:296px; float:left; 
overflow:hidden; margin-left:200px;">
 <ul id="marquee">
  <li>
  <img src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy" alt="banner_美容" 
  style="width:450px; height:296px;">
  </li>
  <li>
  <img src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy" alt="banner_美容"
  style="width:450px; height:296px;">
  </li>
 </ul>
</div>

CSS defines 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 use parameters to create a variety of slider effects:

mode: 'horizontal', // 'horizontal', 'vertical', 'fade' defines the direction of slider scrolling. There are three values ​​to choose from
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, will hide "next" on the last slide and on the front slide Film therefore "prev"
controls: true, // true, false - previous and next controls whether to display the "previous" and "next" buttons
speed: 500, // integer - in ms, duration of time slide transitions will occupy Speed, unit is 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 full is set, 1, 2, 3 will be displayed ..., if short is set, 1/4 will be displayed.
pagerLocation: 'bottom', // 'bottom', 'top' - location of pager The location of the page number
pagerShortSeparator: '/', // string - ex: 'of' pager would display 1 of 4 page separator
pagerActiveClass: 'pager-active', // string - classname attached to the active pager link className of the current page number
nextText: 'next', // string - text displayed for 'next' control The text of the next page
nextImage: '', // string - filepath of image used for 'next' control. ex: 'images/next.jpg' You can set the next page to 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 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) Whether to display the title of the image and read the content of the title attribute of the image.

captionsSelector: null, // jQuery selector - element to contain the captions. ex: '#captions'
auto: false, // true, false - make slideshow change automatically Slideshow automatically scrolls
autoDirection: 'next', // 'next', 'prev' - direction in which auto show will 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 will wait for 'start' control to activate
autoHover: false, // true, false - if true show will pause on mouseover Setting mouseover will cause automatic scrolling to 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 for 'start' control start button text
startImage: '', // string - filepath of image used for 'start' control. ex: 'images/start.jpg' Image of the start button
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' Stop button image
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 be helpful to everyone’s jQuery programming.