jQuery做出响应式图片轮播效果
- php中世界最好的语言原创
- 2018-04-25 10:31:522663浏览
这次给大家带来jQuery做出响应式图片轮播效果，jQuery做出响应式图片轮播效果的注意事项有哪些，下面就是实战案例，一起来看一下。
运行效果截图如下：
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件，mislider轮播图插件的特点有：
使用简单
在同一个屏幕中支持多个轮播图
轮播图的内容可以是单张图片或复杂的HTML内容
轻量级
响应式设计
非常容易定制
丰富的回调函数
跨浏览器，支持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>
构建html
<ol class="mis-slider"> <!-- slider 元素 - class是一个参数选项 --> <li class="mis-slide"> <!-- 一个旋转元素 - class是一个参数选项 --> <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，插件会自动为相应的元素添加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中文网其它相关文章！
推荐阅读：
以上是jQuery做出响应式图片轮播效果的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn