jquery外掛bxslider用法實例分析_jquery

本文實例講述了jquery外掛程式bxslider用法。分享給大家供大家參考。具體用法如下：

先呼叫對應js檔：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>

jQuery程式碼部分：

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

HTML結構如下:

<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定義左右按鈕樣式：

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

參數說明：

bxSlider 詳細設定參數：
bxSlider有很多設定參數，讓你能夠用參數製作出各種各樣的slider效果：

mode: 'horizo​​ntal', // 'horizo​​ntal', 'vertical', 'fade' 定義slider滾動的方向，有三個值可供選擇
infiniteLoop: true, // true, false - display first slide after last 無限迴圈
hideControlOnEnd: false, // true, false - if true, will hide 'next' control on last slide and 'prev' control on first 如果設定true，將會在最後一個幻燈片隱藏“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   若設定full，將顯示1，2，3 ……，如果設定short，將顯示1/4 .
pagerLocation: 'bottom', // 'bottom', 'top' - location of pager 頁碼的位置
pagerShortSeparator: '/', // string - ex: 'of' pager would display 1 of 4 頁面分隔符號
pagerActiveClass: 'pager-active', // string - classname attached to the active pager link 目前頁碼的className
nextText: 'next', // string - text displayed for 'next' control 下一頁的文字
nextImage: '', // string - filepath of image used for 'next' control. ex: 'images/next.jpg' 可以設定下一頁為圖片
nextSelector: null, // jQuery selector - element to contain the next control. ex: '#next'
prevText: 'prev', // string - text displayed for 'previous' control 上一頁的文字
prevImage: '', // string - filepath of image used for 'previous' control. ex: 'images/prev.jpg' 上一頁的圖片
prevSelector: null, // jQuery selector - element to contain the previous control. ex: '#next'
captions: false, // true, false - display image captions (reads the image 'title' tag) 是否顯示圖片的標題，讀取圖片的title屬性的內容。
 
captionsSelector: null, // jQuery selector - element to contain the captions. ex: '#captions'
auto: false, // true, false - make slideshow change automatically 投影片自動捲動
autoDirection: 'next', // 'next', 'prev' - direction in which auto show will tr​​averse 自動滾動的順序
autoControls: false, // true, false - show 'start' and 'stop' controls for auto show 自動捲動的控制鍵
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 設定滑鼠mouseover將會使自動捲動暫停
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  過渡時間
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 tr​​averse
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

希望本文所述對大家的jQuery程式設計有所幫助。