在網站建設中，Jquery.bxSlider 插件實現幻燈片切換效果:的參數說明：bxSlider 詳細配置參數：bxSlider有很多配置參數，使你能夠用參數制作出各種各樣的slider效果。
效果圖：
JS:
$('.bxslider').bxSlider({
mode: 'fade',
captions: true
});HTML:
<ul class="bxslider"> <li><img src="/images/730_200/tree_root.jpg" title="Funky roots" /></li> <li><img src="/images/730_200/hill_road.jpg" title="The long and winding road" /></li> <li><img src="/images/730_200/trees.jpg" title="Happy trees" /></li> </ul>
參數說明：
mode: 'horizontal', // 'horizontal', '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 traverse 自動滾動的順序 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 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
