摘要：
占个坑，有空仔细研究下。）6.全回调函数和公共方法7.小文件大小，完全主题，简单实现8.浏览器：Firefox，Chrome，Safari支持iOS，Android，IE7+，9.大量的配置选项支持：˂!
占个坑，有空仔细研究下。
官网：http://bxslider.com/
优点：
1.完全响应-将适应任何设备
2.水平，垂直和褪色模式
3.它可以包括图片，视频，或HTML内容
4.先进的触摸/刷卡支持内置
5.使用css滑动动画（本地硬件加速！）
6.全回调函数和公共方法
7.小文件大小，完全主题，简单实现
8.浏览器：Firefox，Chrome，Safari支持iOS，Android，IE7 +，
9.大量的配置选项
支持：
<!-- jQuery library (served from Google) --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="http://t.zoukankan.com/js/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="http://t.zoukankan.com/lib/jquery.bxslider.css" rel="stylesheet" />
html：
<li>标签中可以使用图片、视频、html
<ul class="bxslider"> <li><img src="http://t.zoukankan.com/images/pic1.jpg" /></li> <li><img src="http://t.zoukankan.com/images/pic2.jpg" /></li> <li><img src="http://t.zoukankan.com/images/pic3.jpg" /></li> <li><img src="http://t.zoukankan.com/images/pic4.jpg" /></li> </ul>
使用：
$(document).ready(function(){ $('.bxslider').bxSlider(); });
http://bxslider.com/examples
有大量的使用案例
参数设置：
General
mode
Type of transition between slides
default: 'horizontal'
options: 'horizontal', 'vertical', 'fade'
speed
Slide transition duration (in ms)
default: 500
options: integer
slideMargin
Margin between each slide
default: 0
options: integer
startSlide
Starting slide index (zero-based)
default: 0
options: integer
randomStart
Start slider on a random slide
default: false
options: boolean (true / false)
slideSelector
Element to use as slides (ex.
Note: by default, bxSlider will use all immediate children of the slider element
'div.slide').Note: by default, bxSlider will use all immediate children of the slider element
default: ''
options: jQuery selector
infiniteLoop
If
true, clicking "Next" while on the last slide will transition to the first slide and vice-versadefault: true
options: boolean (true / false)
hideControlOnEnd
If
Note: Only used when
true, "Next" control will be hidden on last slide and vice-versaNote: Only used when
infiniteLoop: falsedefault: false
options: boolean (true / false)
easing
The type of "easing" to use during transitions. If using CSS transitions, include a value for the
Seehttp://gsgd.co.uk/sandbox/jquery/easing/for more info.
transition-timing-functionproperty. If not using CSS transitions, you may includeplugins/jquery.easing.1.3.jsfor many options.Seehttp://gsgd.co.uk/sandbox/jquery/easing/for more info.
default: null
options: if using CSS: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'. If not using CSS: 'swing', 'linear' (see the above file for more options)
captions
Include image captions. Captions are derived from the image's
titleattributedefault: false
options: boolean (true / false)
ticker
Use slider in ticker mode (similar to a news ticker)
default: false
options: boolean (true / false)
tickerHover
Ticker will pause when mouse hovers over slider. Note: this functionality does NOT work if using CSS transitions!
default: false
options: boolean (true / false)
adaptiveHeight
Dynamically adjust slider height based on each slide's height
default: false
options: boolean (true / false)
adaptiveHeightSpeed
Slide height transition duration (in ms). Note: only used if
adaptiveHeight: truedefault: 500
options: integer
video
If any slides contain video, set this to
Seehttp://fitvidsjs.com/for more info
true. Also, includeplugins/jquery.fitvids.jsSeehttp://fitvidsjs.com/for more info
default: false
options: boolean (true / false)
responsive
Enable or disable auto resize of the slider. Useful if you need to use fixed width sliders.
default: true
options: boolean (true / false)
useCSS
If true, CSS transitions will be used for horizontal and vertical slide animations (this uses native hardware acceleration). If false, jQuery animate() will be used.
default: true
options: boolean (true / false)
preloadImages
If 'all', preloads all images before starting the slider. If 'visible', preloads only images in the initially visible slides before starting the slider (tip: use 'visible' if all slides are identical dimensions)
default: visible
options: 'all', 'visible'
touchEnabled
If
true, slider will allow touch swipe transitionsdefault: true
options: boolean (true / false)
swipeThreshold
Amount of pixels a touch swipe needs to exceed in order to execute a slide transition. Note: only used if
touchEnabled: truedefault: 50
options: integer
oneToOneTouch
If
true, non-fade slides follow the finger as it swipesdefault: true
options: boolean (true / false)
preventDefaultSwipeX
If
true, touch screen will not move along the x-axis as the finger swipesdefault: true
options: boolean (true / false)
preventDefaultSwipeY
If
true, touch screen will not move along the y-axis as the finger swipesdefault: false
options: boolean (true / false)
Pager
pager
If
true, a pager will be addeddefault: true
options: boolean (true / false)
pagerType
If
'full', a pager link will be generated for each slide. If'short', a x / y pager will be used (ex. 1 / 5)default: 'full'
options: 'full', 'short'
pagerShortSeparator
If
pagerType: 'short', pager will use this value as the separating characterdefault: ' / '
options: string
pagerSelector
Element used to populate the populate the pager. By default, the pager is appended to the bx-viewport
default: ''
options: jQuery selector
pagerCustom
Parent element to be used as the pager. Parent element must contain a
<a data-slide-index="x">element for each slide. See examplehere. Not for use with dynamic carousels.default: null
options: jQuery selector
buildPager
If supplied, function is called on every slide element, and the returned value is used as the pager item markup.
Seeexamplesfor detailed implementation
Seeexamplesfor detailed implementation
default: null
options: function(slideIndex)
Controls
controls
If
true, "Next" / "Prev" controls will be addeddefault: true
options: boolean (true / false)
nextText
Text to be used for the "Next" control
default: 'Next'
options: string
prevText
Text to be used for the "Prev" control
default: 'Prev'
options: string
nextSelector
Element used to populate the "Next" control
default: null
options: jQuery selector
prevSelector
Element used to populate the "Prev" control
default: null
options: jQuery selector
autoControls
If
true, "Start" / "Stop" controls will be addeddefault: false
options: boolean (true / false)
startText
Text to be used for the "Start" control
default: 'Start'
options: string
stopText
Text to be used for the "Stop" control
default: 'Stop'
options: string
autoControlsCombine
When slideshow is playing only "Stop" control is displayed and vice-versa
default: false
options: boolean (true / false)
autoControlsSelector
Element used to populate the auto controls
default: null
options: jQuery selector
Auto
auto
Slides will automatically transition
default: false
options: boolean (true / false)
pause
The amount of time (in ms) between each auto transition
default: 4000
options: integer
autoStart
Auto show starts playing on load. If
false, slideshow will start when the "Start" control is clickeddefault: true
options: boolean (true / false)
autoDirection
The direction of auto show slide transitions
default: 'next'
options: 'next', 'prev'
autoHover
Auto show will pause when mouse hovers over slider
default: false
options: boolean (true / false)
autoDelay
Time (in ms) auto show should wait before starting
default: 0
options: integer
Carousel
minSlides
The minimum number of slides to be shown. Slides will be sized down if carousel becomes smaller than the original size.
default: 1
options: integer
maxSlides
The maximum number of slides to be shown. Slides will be sized up if carousel becomes larger than the original size.
default: 1
options: integer
moveSlides
The number of slides to move on transition. This value must be
>= minSlides, and<= maxSlides. If zero (default), the number of fully-visible slides will be used.default: 0
options: integer
slideWidth
The width of each slide. This setting is required for all horizontal carousels!
default: 0
options: integer
Callbacks
onSliderLoad
Executes immediately after the slider is fully loaded
default: function(){}
options: function(currentIndex){ // your code here }
arguments:
currentIndex: element index of the current slide
onSlideBefore
Executes immediately before each slide transition.
default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
$slideElement: jQuery element of the destination element
oldIndex: element index of the previous slide (before the transition)
newIndex: element index of the destination slide (after the transition)
onSlideAfter
Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).
default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
$slideElement: jQuery element of the destination element
oldIndex: element index of the previous slide (before the transition)
newIndex: element index of the destination slide (after the transition)
onSlideNext
Executes immediately before each "Next" slide transition. Function argument is the target (next) slide element.
default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
$slideElement: jQuery element of the destination element
oldIndex: element index of the previous slide (before the transition)
newIndex: element index of the destination slide (after the transition)
onSlidePrev
Executes immediately before each "Prev" slide transition. Function argument is the target (prev) slide element.
default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
$slideElement: jQuery element of the destination element
oldIndex: element index of the previous slide (before the transition)
newIndex: element index of the destination slide (after the transition)
Public methods
goToSlide
Performs a slide transition to the supplied slide index (zero-based)
example:
slider =$('.bxslider').bxSlider();
slider.goToSlide(3);goToNextSlide
Performs a "Next" slide transition
example:
slider =$('.bxslider').bxSlider();
slider.goToNextSlide();goToPrevSlide
Performs a "Prev" slide transition
example:
slider =$('.bxslider').bxSlider();
slider.goToPrevSlide();startAuto
Starts the auto show. Provide an argument
falseto prevent the auto controls from being updated.example:
slider =$('.bxslider').bxSlider();
slider.startAuto();stopAuto
Stops the auto show. Provide an argument
falseto prevent the auto controls from being updated.example:
slider =$('.bxslider').bxSlider();
slider.stopAuto();getCurrentSlide
Returns the current active slide
example:
slider =$('.bxslider').bxSlider();
var current = slider.getCurrentSlide();getSlideCount
Returns the total number of slides in the slider
example:
slider =$('.bxslider').bxSlider();
var slideQty = slider.getSlideCount();reloadSlider
Reload the slider. Useful when adding slides on the fly. Accepts an optional settings object.See here for an example.
example:
slider =$('.bxslider').bxSlider();
slider.reloadSlider();destroySlider
Destroy the slider. This reverts all slider elements back to their original state (before calling the slider).
example:
slider =$('.bxslider').bxSlider();
slider.destroySlider();