标签：
占个坑，有空仔细研究下。
官网：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="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="/js/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="/lib/jquery.bxslider.css" rel="stylesheet" />
html：
<li>标签中可以使用图片、视频、html
<ul class="bxslider"> <li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li> <li><img src="/images/pic3.jpg" /></li> <li><img src="/images/pic4.jpg" /></li> </ul>
使用：
$(document).ready(function(){ $(‘.bxslider‘).bxSlider(); });
http://bxslider.com/examples
有大量的使用案例
参数设置：
default: ‘horizontal‘
options: ‘horizontal‘, ‘vertical‘, ‘fade‘
default: 500
options: integer
default: 0
options: integer
default: 0
options: integer
default: false
options: boolean (true / false)
‘div.slide‘).default: ‘‘
options: jQuery selector
true, clicking "Next" while on the last slide will transition to the first slide and vice-versadefault: true
options: boolean (true / false)
true, "Next" control will be hidden on last slide and vice-versainfiniteLoop: falsedefault: false
options: boolean (true / false)
transition-timing-function property. If not using CSS transitions, you may include plugins/jquery.easing.1.3.js for many options.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)
title attributedefault: false
options: boolean (true / false)
default: false
options: boolean (true / false)
default: false
options: boolean (true / false)
default: false
options: boolean (true / false)
adaptiveHeight: truedefault: 500
options: integer
true. Also, include plugins/jquery.fitvids.jsdefault: false
options: boolean (true / false)
default: true
options: boolean (true / false)
default: true
options: boolean (true / false)
default: visible
options: ‘all‘, ‘visible‘
true, slider will allow touch swipe transitionsdefault: true
options: boolean (true / false)
touchEnabled: truedefault: 50
options: integer
true, non-fade slides follow the finger as it swipesdefault: true
options: boolean (true / false)
true, touch screen will not move along the x-axis as the finger swipesdefault: true
options: boolean (true / false)
true, touch screen will not move along the y-axis as the finger swipesdefault: false
options: boolean (true / false)
true, a pager will be addeddefault: true
options: boolean (true / false)
‘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‘
pagerType: ‘short‘, pager will use this value as the separating characterdefault: ‘ / ‘
options: string
default: ‘‘
options: jQuery selector
<a data-slide-index="x"> element for each slide. See example here. Not for use with dynamic carousels.default: null
options: jQuery selector
default: null
options: function(slideIndex)
true, "Next" / "Prev" controls will be addeddefault: true
options: boolean (true / false)
default: ‘Next‘
options: string
default: ‘Prev‘
options: string
default: null
options: jQuery selector
default: null
options: jQuery selector
true, "Start" / "Stop" controls will be addeddefault: false
options: boolean (true / false)
default: ‘Start‘
options: string
default: ‘Stop‘
options: string
default: false
options: boolean (true / false)
default: null
options: jQuery selector
default: false
options: boolean (true / false)
default: 4000
options: integer
false, slideshow will start when the "Start" control is clickeddefault: true
options: boolean (true / false)
default: ‘next‘
options: ‘next‘, ‘prev‘
default: false
options: boolean (true / false)
default: 0
options: integer
default: 1
options: integer
default: 1
options: integer
>= minSlides, and <= maxSlides. If zero (default), the number of fully-visible slides will be used.default: 0
options: integer
default: 0
options: integer
default: function(){}
options: function(currentIndex){ // your code here }
arguments:
currentIndex: element index of the current slide
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)
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)
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)
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)
example:
slider = $(‘.bxslider‘).bxSlider();
slider.goToSlide(3);example:
slider = $(‘.bxslider‘).bxSlider();
slider.goToNextSlide();example:
slider = $(‘.bxslider‘).bxSlider();
slider.goToPrevSlide();false to prevent the auto controls from being updated.example:
slider = $(‘.bxslider‘).bxSlider();
slider.startAuto();false to prevent the auto controls from being updated.example:
slider = $(‘.bxslider‘).bxSlider();
slider.stopAuto();example:
slider = $(‘.bxslider‘).bxSlider();
var current = slider.getCurrentSlide();example:
slider = $(‘.bxslider‘).bxSlider();
var slideQty = slider.getSlideCount();example:
slider = $(‘.bxslider‘).bxSlider();
slider.reloadSlider();example:
slider = $(‘.bxslider‘).bxSlider();
slider.destroySlider();
标签：
原文地址：http://www.cnblogs.com/KuckBoy-shan/p/5487929.html
