引入文件

<link h<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>

<link href="css/jquery.bxslider.css" rel="stylesheet" type="text/css">

左右鍵css 樣式

??? .bx-prev{ width:30px; height:30px; background:#f00; text-indent: -999999px;? z-index: 999;position: absolute; float:left;? }
??? .bx-next{? width:30px; height:30px; background:#f00; text-indent: -999999px; z-index: 999; position: absolute;?? float:right; }

參數(shù)說(shuō)明：

bxSlider 詳細(xì)配置參數(shù)：
bxSlider有很多配置參數(shù)，使你能夠用參數(shù)制作出各種各樣的slider效果：

實(shí)例參考
??? <script type="text/javascript">

??????? $(document).ready(function(){
????????? $('選中輪播區(qū)域(.slider)').bxSlider({
?? ??? ??? ?????? mode: 'fade',
??????????? //圖片寬
??????????? slideWidth: 1920,
??????????? slideMargin: 20,
??????????? controls:true,
??????????? //自動(dòng)跳轉(zhuǎn)
??????????? auto:true,
??????????? autoDirection: 'next',
??????????? pause: 3000,
????????? });
??????? });
??? </script>

?

<移動(dòng)方向>

mode: 'horizontal', // 'horizontal', 'vertical', 'fade' 定義slider滾動(dòng)的方向，有三個(gè)值可供選擇
infiniteLoop: true, // true, false - display first slide after last 無(wú)限循環(huán)
hideControlOnEnd: false, // true, false - if true, will hide 'next' control on last slide and 'prev' control on first 如果設(shè)置true，將會(huì)在最后一個(gè)幻燈片隱藏“next”，在最前面的幻燈片因此“prev”
controls: true, // true, false - previous and next controls 是否顯示“previous”和“next”按鈕
speed: 500, // integer - in ms, duration of time slide transitions will occupy?? 速度，單位為毫秒
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?? 如果設(shè)置full，將顯示1，2，3……，如果設(shè)置short，將顯示1/4 .
pagerLocation: 'bottom', // 'bottom', 'top' - location of pager 頁(yè)碼的位置
pagerShortSeparator: '/', // string - ex: 'of' pager would display 1 of 4 頁(yè)面分隔符
pagerActiveClass: 'pager-active', // string - classname attached to the active pager link 當(dāng)前頁(yè)碼的className
nextText: 'next', // string - text displayed for 'next' control 下一頁(yè)的文字
nextImage: '', // string - filepath of image used for 'next' control. ex: 'images/next.jpg' 可以設(shè)置下一頁(yè)為圖片
nextSelector: null, // jQuery selector - element to contain the next control. ex: '#next'
prevText: 'prev', // string - text displayed for 'previous' control 上一頁(yè)的文字
prevImage: '', // string - filepath of image used for 'previous' control. ex: 'images/prev.jpg' 上一頁(yè)的圖片
prevSelector: null, // jQuery selector - element to contain the previous control. ex: '#next'
captions: false, // true, false - display image captions (reads the image 'title' tag) 是否顯示圖片的標(biāo)題，讀取圖片的title屬性的內(nèi)容。
?

<自動(dòng)播放>
captionsSelector: null, // jQuery selector - element to contain the captions. ex: '#captions'
auto: false, // true, false - make slideshow change automatically 幻燈片自動(dòng)滾動(dòng)
autoDirection: 'next', // 'next', 'prev' - direction in which auto show will traverse 自動(dòng)滾動(dòng)的順序
autoControls: false, // true, false - show 'start' and 'stop' controls for auto show 自動(dòng)滾動(dòng)的控制鍵
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 設(shè)置鼠標(biāo)mouseover將會(huì)使自動(dòng)滾動(dòng)暫停
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? 過(guò)渡時(shí)間
startText: 'start', // string - text displayed for 'start' control 開始按鈕的文字
startImage: '', // string - filepath of image used for 'start' control. ex: 'images/start.jpg' 開始按鈕的圖片
stopText: 'stop', // string - text displayed for 'stop' control 停止按鈕的文本
stopImage: '', // string - filepath of image used for 'stop' control. ex: 'images/stop.jpg'?? 停止按鈕的圖片
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

轉(zhuǎn)載于:https://www.cnblogs.com/jghgo/p/8203561.html

總結(jié)

以上是生活随笔為你收集整理的jquery 轮播插件 bxslider的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。