這次給大家?guī)韏Query做出響應(yīng)式圖片輪播效果，jQuery做出響應(yīng)式圖片輪播效果的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

運行效果截圖如下：

mislider是一款效果非?？岬膉Query響應(yīng)式圓形圖片輪播圖特效插件，mislider輪播圖插件的特點有：

• 使用簡單

• 在同一個屏幕中支持多個輪播圖

• 輪播圖的內(nèi)容可以是單張圖片或復(fù)雜的HTML內(nèi)容

• 輕量級

• 響應(yīng)式設(shè)計

• 非常容易定制

• 豐富的回調(diào)函數(shù)

• 跨瀏覽器，支持IE8 瀏覽器

引入核心文件
mislider插依賴于一些插件，在引入之前要先引入jQuery、html5shiv.js、mislider.min.js以及mislider.min.css，mislider-custom.css文件。

<link href="css/mislider.css" rel="stylesheet">
<link href="css/mislider-custom.css" rel="stylesheet">
<script src="../lib/html5shiv/html5shiv.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/mislider.js"></script>

構(gòu)建html

<ol class="mis-slider">
???<!-- slider 元素 - class是一個參數(shù)選項 -->
???<li class="mis-slide">
????<!-- 一個旋轉(zhuǎn)元素 - class是一個參數(shù)選項 -->
????<a href="#" class="mis-container">
?????<!-- A slide container - this element is optional, if absent the plugin adds it automatically -->
?????<figure>
??????<!-- Slide content - whatever you want -->
??????<img src="images/garden01.jpg" alt="Pink Water Lillies">
??????<figcaption>Pink?Water?Lillies</figcaption>
?????</figure>
????</a>
???</li>
???<li class="mis-slide">
????<a href="#" class="mis-container">
?????<figure>
??????<img src="images/garden02.jpg" alt="Pond with Lillies">
??????<figcaption>Pond?with?Lillies</figcaption>
?????</figure>
????</a>
???</li>
?</ol>

注意：上面的class并不是必須的，如果不寫這些class，插件會自動為相應(yīng)的元素添加class。默認情況下，該輪播圖插件使用的是有序列表的結(jié)構(gòu)，如果你使用不同的元素結(jié)構(gòu)，請確保要修改selectorSlider和selectorSlide選項。

寫入JS初始化插件

jQuery(function?($)?{
???var?slider?=?$('.mis-stage').miSlider({
????//?The?height?of?the?stage?in?px.?Options:?false?or?positive?integer.?false?=?height?is?calculated?using?maximum?slide?heights.?Default:?false
????stageHeight:?380,
????//?Number?of?slides?visible?at?one?time.?Options:?false?or?positive?integer.?false?=?Fit?as?many?as?possible.?Default:?1
????slidesOnStage:?false,
????//?The?location?of?the?current?slide?on?the?stage.?Options:?'left',?'right',?'center'.?Defualt:?'left'
????slidePosition:?'center',
????//?The?slide?to?start?on.?Options:?'beg',?'mid',?'end'?or?slide?number?starting?at?1?-?'1','2','3',?etc.?Defualt:?'beg'
????slideStart:?'mid',
????//?The?relative?percentage?scaling?factor?of?the?current?slide?-?other?slides?are?scaled?down.?Options:?positive?number?100?or?higher.?100?=?No?scaling.?Defualt:?100
????slideScaling:?150,
????//?The?vertical?offset?of?the?slide?center?as?a?percentage?of?slide?height.?Options:?positive?or?negative?number.?Neg?value?=?up.?Pos?value?=?down.?0?=?No?offset.?Default:?0
????offsetV:?-5,
????//?Center?slide?contents?vertically?-?Boolean.?Default:?false
????centerV:?true,
????//?Opacity?of?the?prev?and?next?button?navigation?when?not?transitioning.?Options:?Number?between?0?and?1.?0?(transparent)?-?1?(opaque).?Default:?.5
????navButtonsOpacity:?1
???});
??});

注意：要確保.mis-stage jQuery選擇器和HTML頁面中的輪播圖容器的class名稱相同。
參數(shù)

?jQuery(function?($)?{
???var?slider?=?$('.mis-stage').miSlider({
????//?輪播圖過渡動畫的速度?
????//?單位毫秒.?Options:?positive?integer.
????speed:?700,
????//?輪播圖在兩個過渡動畫之間的暫停時間?
????//?in?milliseconds.?Options:?false,?positive?integer.?
????//?false?=?Autoplay?off，設(shè)為false則不自動播放.
????pause:?4000,
????//?輪播圖的增量?
????//?Autoplay?and?Nav?Buttons.?自動播放與導(dǎo)航按鈕?
????//?Options:?positive?or?negative?integer.?
????//?Positive?integer?=?Slide?left.?正數(shù)向左
????//?Negative?integer?=?Slide?right.?負數(shù)向右
????increment:?1,
????//?輪播圖的高度?
????//?Options:?false?or?positive?integer.?值：false或正整數(shù)
????//?false?=?height?is?calculated?using?設(shè)為false自動計算高度
????//?maximum?slide?heights.最大高度
????stageHeight:?false,
????//?同時在屏幕上可見的輪播圖圖片數(shù)量
????//?Options:?false?or?positive?integer.?值：false或正整數(shù)
????//?false?=?Fit?as?many?as?possible.?false為自適應(yīng)
????slidesOnStage:?1,
????//?連續(xù)運動-輪播圖在同一個方向上無限循環(huán)?
????//?true?=?slides?loop?in?one?direction?if?possible.
????slidesContinuous:?true,
????//?當(dāng)前輪播圖在屏幕上的位置：left,?center,?right?
????//?Options:?'left',?'right',?'center'.
????slidePosition:?'left',
????//?輪播圖開始播放的位置.?
????//?Options:?'beg',?'mid',?'end'?
????//?or?slide?number?starting?at?1?-?'1','2',?etc.
????slideStart:?'beg',
????//?當(dāng)前slide的寬度，單位px?
????//?Options:?false?or?positive?integer.?值：false或正整數(shù)
????//?false?=?width?is?the?maximum?of?設(shè)為false時為最大寬度
????//?the?existing?slide?widths.
????slideWidth:?false,
????//?當(dāng)前slide的縮放因子-其它圖片會相應(yīng)縮小
????//?of?the?current?slide
????//?other?slides?are?scaled?down.?
????//?Options:?positive?number?100?or?higher.?
????//?100?=?No?scaling.
????slideScaling:?100,
????//?slide的垂直偏移
????//?as?a?percentage?of?slide?height.?
????//?Options:?positive?or?negative?number.?
????//?Neg?value?=?up.?Pos?value?=?down.?
????//?0?=?No?offset.
????offsetV:?0,
????//?slide中的內(nèi)容垂直居中
????//?Boolean.
????centerV:?false,
????//?原點導(dǎo)航按鈕是否可用
????//?Boolean.
????navList:?true,
????//?箭頭導(dǎo)航按鈕是否可用
????//?Boolean.
????navButtons:?true,
????//?箭頭導(dǎo)航一直顯示
????//?except?when?transitioning?-?Boolean.
????navButtonsShow:?false,
????//?箭頭導(dǎo)航按鈕的透明度?
????//?button?navigation?when?not?transitioning.?
????//?Options:?Number?between?0?and?1.?
????//?0?(transparent)?-?1?(opaque).
????navButtonsOpacity:?0.5,
????//?輪播圖隨機順序
????//?Boolean.
????randomize:?false,
????//?輪播圖加載后的回調(diào)函數(shù)
????//?called?when?slides?have?loaded.
????slidesLoaded:?false,
????//?輪播圖過渡動畫前的回調(diào)函數(shù)
????//?call?back?function?-?called?before?
????//?the?slide?transition.
????beforeTrans:?false,
????//?輪播圖過渡動畫完成之后的回調(diào)函數(shù)
????//?call?back?function?-?called?at?the?end?
????//?of?a?slide?transition.
????afterTrans:?false,
????//?Stage元素上的class名稱
????//?to?the?stage?element.
????classStage:?'mis-stage',
????//?The?CSS?class?that?will?be?Slider元素上的class名稱
????//?applied?to?the?slider?element.
????classSlider:?'mis-slider',
????//?The?CSS?class?that?will?be?每一個Slide元素上的class名稱
????//?applied?to?each?slide?element.
????classSlide:?'mis-slide',
????//?The?CSS?class?that?will?be?箭頭導(dǎo)航按鈕元素上的class名稱
????//?applied?to?the?parent?of?the?
????//?prev?and?next?button?navigation?elements.
????classNavButtons:?'mis-nav-buttons',
????//?The?CSS?class?that?will?be?圓點導(dǎo)航按鈕上的class名稱
????//?applied?to?the?parent?of?the?
????//?numbered?list?navigation?elements
????classNavList:?'mis-nav-list',
????//?The?selector?used?to?select?用于選擇輪播圖的選擇器
????//?the?slider?element
????//?Descendant?of?the?stage
????selectorSlider:?'ol',
????//?The?selector?used?to?select?用于選擇每一個Slide的選擇器
????//?each?slide?element
????//?Descendant?of?the?slider
????selectorSlide:?'li'
???});
??});

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

JS JQuery動態(tài)操作表格行方法詳解

jQuery實現(xiàn)表單里文字按鈕特效合集

以上是jQuery做出響應(yīng)式圖片輪播效果的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！