jQuery做出響應式圖片輪播效果

php中世界最好的语言
發布: 2018-04-25 10:31:52
原創
2530 人瀏覽過

這次帶給大家jQuery做出響應式圖片輪播效果,jQuery做出響應式圖片輪播效果的注意事項有哪些,下面就是實戰案例,一起來看一下。

運行效果截圖如下:

mislider是一款效果非常酷的jQuery響應式圓形圖片輪播圖特效插件,mislider輪播圖外掛程式的特點有:

  • 使用簡單

  • 在同一個畫面支援多個輪播圖

  • #輪播圖的內容可以是單張圖片或複雜的HTML內容

  • #輕量級

  • 響應式設計

  • 非常容易客製化

  • 豐富的回呼函數

  • 跨瀏覽器,支援IE8 瀏覽器

引入核心檔案
mislider插依賴一些插件,在引入之前要先引入jQuery 、html5shiv.js、mislider.min.js以及mislider.min.css,mislider-custom.css檔案

    
登入後複製

建構html

注意:上面的class並不是必須的,如果不寫這些class,外掛就會自動為對應的元素加入class。預設情況下,該輪播圖外掛程式使用的是有序列表的結構,如果你使用不同的元素結構,請確保要修改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名稱相同。
參數

jQuery(function ($) { var slider = $('.mis-stage').miSlider({ // 轮播图过渡动画的速度 // 单位毫秒. Options: positive integer. speed: 700, // 轮播图在两个过渡动画之间的暂停时间 // in milliseconds. Options: false, positive integer. // false = Autoplay off,设为false则不自动播放. pause: 4000, // 轮播图的增量 // Autoplay and Nav Buttons. 自动播放与导航按钮 // Options: positive or negative integer. // Positive integer = Slide left. 正数向左 // Negative integer = Slide right. 负数向右 increment: 1, // 轮播图的高度 // Options: false or positive integer. 值:false或正整数 // false = height is calculated using 设为false自动计算高度 // maximum slide heights.最大高度 stageHeight: false, // 同时在屏幕上可见的轮播图图片数量 // Options: false or positive integer. 值:false或正整数 // false = Fit as many as possible. false为自适应 slidesOnStage: 1, // 连续运动-轮播图在同一个方向上无限循环 // true = slides loop in one direction if possible. slidesContinuous: true, // 当前轮播图在屏幕上的位置:left, center, right // Options: 'left', 'right', 'center'. slidePosition: 'left', // 轮播图开始播放的位置. // Options: 'beg', 'mid', 'end' // or slide number starting at 1 - '1','2', etc. slideStart: 'beg', // 当前slide的宽度,单位px // Options: false or positive integer. 值:false或正整数 // false = width is the maximum of 设为false时为最大宽度 // the existing slide widths. slideWidth: false, // 当前slide的缩放因子-其它图片会相应缩小 // 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中的内容垂直居中 // Boolean. centerV: false, // 原点导航按钮是否可用 // Boolean. navList: true, // 箭头导航按钮是否可用 // Boolean. navButtons: true, // 箭头导航一直显示 // except when transitioning - Boolean. navButtonsShow: false, // 箭头导航按钮的透明度 // button navigation when not transitioning. // Options: Number between 0 and 1. // 0 (transparent) - 1 (opaque). navButtonsOpacity: 0.5, // 轮播图随机顺序 // Boolean. randomize: false, // 轮播图加载后的回调函数 // called when slides have loaded. slidesLoaded: false, // 轮播图过渡动画前的回调函数 // call back function - called before // the slide transition. beforeTrans: false, // 轮播图过渡动画完成之后的回调函数 // 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 箭头导航按钮元素上的class名称 // applied to the parent of the // prev and next button navigation elements. classNavButtons: 'mis-nav-buttons', // The CSS class that will be 圆点导航按钮上的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' }); });
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

JS JQuery動態運算表行方法詳解

jQuery實作表單里文字按鈕特效集

以上是jQuery做出響應式圖片輪播效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門推薦
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!