查看演示
website
插件描述：最全最簡單最通用的 幻燈片輪播 ，滾動燈箱，可控制的插件，pc端和移動端都可完美使用
jQuery: 部分
$(function(){
$('#marquee').bxSlider({
mode:'vertical', //默認(rèn)的是水平
displaySlideQty:1,//顯示li的個數(shù)
moveSlideQty: 1,//移動li的個數(shù)
captions: true,//自動控制
auto: true,
controls: false//隱藏左右按鈕
});
});
HTML: 結(jié)構(gòu)
<div>
<ul>
<li><img src="img/1.jpg" alt="banner_1"></li>
<li><img src="img/2.jpg" alt="banner_1"></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;}
============= 以下內(nèi)容由 旅圖灬 提供============
參數(shù)說明：
bxSlider 詳細(xì)配置參數(shù)：
bxSlider有很多配置參數(shù)，使你能夠用參數(shù)制作出各種各樣的slider效果：
mode: 'horizontal',
// 'horizontal', 'vertical', 'fade' 定義slider滾動的方向，有三個值可供選擇
infiniteLoop: true,
// true, false - display first slide after last 無限循環(huán)
hideControlOnEnd: false,
// true, false - if true, will hide 'next' control on last slide and 'prev' control on first 如果設(shè)置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 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 頁碼的位置
pagerShortSeparator: 'http://www.jq22.com/',
// string - ex: 'of' pager would display 1 of 4 頁面分隔符
pagerActiveClass: 'pager-active', // string - classname attached to the active pager link 當(dāng)前頁碼的className
nextText: 'next',
// string - text displayed for 'next' control 下一頁的文字
nextImage: '',
// string - filepath of image used for 'next' control. ex: 'images/next.jpg' 可以設(shè)置下一頁為圖片
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) 是否顯示圖片的標(biāo)題，
垃圾分類亭，讀取圖片的title屬性的內(nèi)容。
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 設(shè)置鼠標(biāo)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
，
路燈燈箱
