mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件。该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效。该轮播图插件的特点有:
使用简单
在同一个屏幕中支持多个轮播图
轮播图的内容可以是单张图片或复杂的HTML内容
轻量级
响应式设计
非常容易定制
丰富的回调函数
跨浏览器,支持IE8+浏览器
使用方法
使用该轮播图插件之前要先引入jQuery和mislider.min.js以及mislider.min.css,mislider-custom.css文件。
HTML结构
这个轮播图插件的HTML结构使用的是一个列表元素来放置图片,列表外面使用一个
注意:上面的class并不是必须的,如果不写这些class,插件会自动为相应的元素添加class。默认情况下,该轮播图插件使用的是有序列表的结构,如果你使用不同的元素结构,请确保要修改selectorSlider和selectorSlide选项。
调用插件
在页面加载完毕之后可以使用下面的方法来初始化该轮播图插件:
jQuery(function ($) {
var slider = $('.mis-stage').miSlider();
});
注意:要确保.mis-stage jQuery选择器和HTML页面中的轮播图容器的class名称相同。
配置参数
下面是该轮播图插件可以被定制的参数:
轮播图过渡动画的速度
轮播图在两个过渡动画之间的暂停时间
轮播图的增量
轮播图的高度
同时在屏幕上可见的轮播图图片数量
连续运动-轮播图在同一个方向上无限循环
当前轮播图