1、引入CSS样式和JS脚本依赖
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
2、HTML标签结构
<ul id="flexiselDemo">
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
</ul>
3、JavaScript脚本初始化
$(function(){
$("#flexiselDemo").flexisel({
visibleItems: 3, //设置默认加载时显示轮播项目数量
itemsToScroll: 2, //每次滚动时切换项目数量
animationSpeed: 100, //轮播动画切换速度
infinite: true, //是否无限循环轮播
navigationTargetSelector: null, //设置左右切换箭头,我这里使用的是默认
autoPlay: {
enable: false, //是否自动轮播
interval: 1000, //轮播切换时间
pauseOnHover: true //是否鼠标滑过暂停轮播
},
responsiveBreakpoints: { //根据屏幕设置轮播效果
portrait: {
changePoint: 480,
visibleItems: 1,
itemsToScroll: 1
},
landscape: {
changePoint: 640,
visibleItems: 2,
itemsToScroll: 2
},
tablet: {
changePoint: 768,
visibleItems: 3,
itemsToScroll: 3
}
},
loaded: function (object) { //轮播加载完成时调用事件
console.log('Slider loaded...');
},
before: function (object) { //轮播触发之前调用事件
console.log('Before transition...');
},
after: function (object) { //轮播过后触发事件
console.log('After transition...');
},
resize: function (object) { //屏幕尺寸发生更改过后触发事件
console.log('After resize...');
}
});
});
这样就完成了响应式旋转木马示例。更详细的使用方法请下载示例参看。
the end