網(wǎng)站CDN加速是什么？CDN加速起到什么作用？
982
2023-10-21
本文實例講述了基于jQuery實現(xiàn)響應(yīng)式圓形圖片輪播特效代碼。分享給大家供大家參考。具體如下：
運(yùn)行效果截圖如下：
mislider是一款效果非常酷的jQuery響應(yīng)式圓形圖片輪播圖特效插件，mislider輪播圖插件的特點(diǎn)有：
引入核心文件
mislider插依賴于一些插件，在引入之前要先引入jQuery、html5shiv.js、mislider.min.js以及mislider.min.css，mislider-custom.css文件。
<link rel="stylesheet"> <link rel="stylesheet"> <script src="http://www.gimoo.net/t/lib/html5shiv/html5shiv.js"></script> <script src="http://www.gimoo.net/t/1904/js/jquery.min.js"></script> <script src="http://www.gimoo.net/t/1904/js/mislider.js"></script>
構(gòu)建html
<ol class="mis-slider">
< slider 元素 - class是一個參數(shù)選項 -->
<li class="mis-slide">
< 一個旋轉(zhuǎn)元素 - class是一個參數(shù)選項 -->
<a 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="http://www.gimoo.net/t/1904/images/garden01.jpg" alt="Pink Water Lillies">
<figcaption>Pink Water Lillies</figcaption>
</figure>
</a>
</li>
<li class="mis-slide">
<a class="mis-container">
<figure>
<img src="http://www.gimoo.net/t/1904/images/garden02.jpg" alt="Pond with Lillies">
<figcaption>Pond with Lillies</figcaption>
</figure>
</a>
</li>
</ol>
注意：上面的class并不是必須的，如果不寫這些class，插件會自動為相應(yīng)的元素添加class。默認(rèn)情況下，該輪播圖插件使用的是有序列表的結(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. 負(fù)數(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ù)運(yùn)動-輪播圖在同一個方向上無限循環(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,
// 原點(diǎn)導(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,
// 輪播圖隨機(jī)順序
// 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 圓點(diǎn)導(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'
});
});
以上就是為大家分享的超酷的jQuery響應(yīng)式圓形圖片輪播圖插件miSlider，希望大家可以熟練使用miSlider插件在自己的作品中能靈活運(yùn)用。
