jQuery响应式圆形转盘基于特殊效果
运行效果的截图如下:
mislider是jQuery响应式圆形效果图图片轮播插件一个非常酷的效果,mislider插件有轮播图的特点:
简单的使用
在同一屏幕上支持多个旋转木马图形
转盘数字内容可能是单个图像或HTML复杂的内容。
轻
响应设计
这很容易定制。
丰富的回调函数
跨浏览器,IE8浏览器支持+
介绍核心文件
mislider插件依赖一些插件。引入前,我们需要引入jQuery,html5shiv.js,mislider.min.js和mislider.min.css文件。
创建HTML
粉红色的水百合
池塘里的百合
注意:上面的类是没有必要的,如果没有写班级,插件会自动添加到相应的元素。默认情况下,使用插件结构序列表的轮播图,如果你使用不同的结构元素,请务必修改selectorslider和selectorslide选项。
编写js初始化插件
函数($){
VaR滑块=美元('。MIS阶段({ MiSlider)。
阶段的高度。选项:假整数或正整数。假是用最大高度滑动高度计算的。默认值:假
stageheight:380,
一次可见的幻灯片数量。选项:假整数或正整数。尽可能多的假配合。默认值:= 1
slidesonstage:假,
当前幻灯片的位置/在舞台上。选项:右,右''center ',默认:右
slideposition:'center,
开始滑动。选项: / the'beg ','mid终结,或滑数从1 - 1,2,3,默认:'beg等。
SlideStart:'mid,
当前幻灯片其他幻灯片的相对百分比缩放因子被缩小。-选项:正数100或更高。100无标度。默认:= 100
slidescaling:150,
滑动中心的垂直偏移量等于滑动高度的百分比。选项:正数还是负数。负价值=了。POS值=下降。= 0未偏移。默认值:0
offsetv:- 5,
中心幻灯片内容-布尔型。垂直/默认:false
centerv:真,
不透明的上一个和下一个/按钮导航时没有转变。选项:0到1之间的数字(透明)1 -(不透明)默认值:5。
navbuttonsopacity:1
});
});
注意:确保轮播图container.mis-stage jQuery选择器和相同名称的类HTML页面。
参数
函数($){
VaR滑块=美元('。MIS阶段({ MiSlider)。
图形转换动画速度
选项:正整数。以毫秒为单位。
速度:700,
两个过渡动画之间的暂停时间转盘图
毫秒。选项:在false,正整数。
假=自动播放/关闭,假不自动播放。
暂停:4000,
增量式图形/旋转木马
/ /自动播放和导航按钮。自动播放和导航按钮
正整数或负整数。选项:
正整数=幻灯片/左。左边是正的
向右滑动。/负负右
增量:1,
高度/旋转木马图形
假整数或正整数。选项:值:假整数还是正整数
假=高度计算/使用假设置自动计算高度
最大滑动高度的最大高度。
stageheight:假,
同时在屏幕上看到图片的旋转木马号码。
假整数或正整数。选项:值:假整数还是正整数
假尽可能多。虚假的适应性
slidesonstage:1,
无限循环连续运动-同向旋转图形
如果可能的话,幻灯片在一个方向上循环。
slidescontinuous:真,
左/中、右屏幕上的位置转盘图。
选项:左,'center。 /右。
slideposition:右,
/旋转木马开始播放位置。
选项:'mid,最终 / 'beg。
或幻灯片编号起始 / 1 - 1,2,等等。
SlideStart:'beg,
幻灯片宽度
假整数或正整数。选项:值:假整数还是正整数
false =宽度是最大宽度设置为false的最大值。
现有幻灯片宽度。
SlideWidth:假,
缩放因子-幻灯片/其他图片将相应减少。
当前幻灯片
幻灯片缩放。 /其他
正数100或更高。选项:
100 缩放。=没有
slidescaling:100,
垂直偏移幻灯片
滑动高度的百分比。
Positive or negative number. 选项:
负价值=了。POS 。
0 /偏移量。=没有
offsetv:0,
垂直中心的内容
。
centerv:假,
可用的起始/导航按钮
。
navlist:真,
箭头/导航按钮可用
。
NavButtons:真的,
已示出箭头/导航
在转换 /除布尔时。
NavButtonsShow:假,
导航/透明的箭头按钮
不转换时导航。按钮
选项之间的数字:0和1。
0(透明)- 1(不透明)。
navbuttonsopacity:0.5,
任意顺序的旋转木马图形
。
随机:假,
加载后的回调函数
幻灯片加载时。
slidesloaded:假,
在转换动画之前的回调函数
回调函数——在调用之前调用
幻灯片切换。
beforetrans:假,
在旋转图转换动画完成后的回调函数
回叫功能-呼叫结束
幻灯片转换。
aftertrans:假,
类/阶段元素名称
舞台元素。
classstage:'mis-stage,
将在元素名上加上滑块类的CSS类
到滑块元素。应用
classslider:'mis-slider,
CSS类,该类将是类上每个幻灯片元素的。
对每个幻灯片元素。应用
classslide:'mis-slide,
将类上的箭头导航按钮元素的CSS类。
到应用程序的父级
和下一个按钮导航元素。 / /预防和控制
ClassNavButtons:'mis-nav-buttons,
在点上将是类名导航按钮的CSS类
到应用程序的父级
列表导航元素
classnavlist:'mis-nav-list,
用于选择器的选择器用于选择传送带映射选择器。
滑块元素
在舞台/后代中
SelectorSlider:'ol,
用于选择器的选择器用于选择每个幻灯片选择器。
幻灯片元素
滑块的/后代
SelectorSlide:李'
});
});
以上是分享很酷的jQuery响应式圆形地图图片轮播插件mislider,希望我们能熟练使用mislider插件可以灵活应用于自己的作品。