描述:flexisel.js响应适应屏幕宽度旋转木马插件,效果很好.它设置为启用自动播放,定义动画的速度和悬停.
特点:
1)Flexisel 将顺应需求适应屏幕宽度变小;
2)根据项目的数量可以更改显示的屏幕宽度;
3)其他选项包括自动播放,动画速度时右和左.
使用方法:
1)下载flexisel.js插件
2)引入js文件
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>fullPageDemo</title> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery.flexisel.js"></script> </head>
3)引入CSS样式文件
<link href="css/flexslider.css" rel="stylesheet">
4)HTML页面
<div class="slider1"> <div class="arrival-grids"> <ul id="flexiselDemo1"> <li> <a href="#"><img src="images/awards/b3.jpg" alt=""/> </a> </li> <li> <a href="#"><img src="images/awards/b4.jpg" alt=""/> </a> </li> <li> <a href="#"><img src="images/awards/b5.jpg" alt=""/> </a> </li> <li> <a href="#"><img src="images/awards/b6.jpg" alt=""/> </a> </li> <li> <a href="#"><img src="images/awards/b7.jpg" alt=""/> </a> </li> <li> <a href="#"><img src="images/awards/b8.jpg" alt=""/> </a> </li> </ul> </div> </div>
5)JavaScript脚本
<script type="text/javascript">
$(window).load(function() {
$("#flexiselDemo1").flexisel({
visibleItems: 4,
animationSpeed: 1000,
autoPlay: true,
autoPlaySpeed: 3000,
pauseOnHover:true,
enableResponsiveBreakpoints: true,
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1
},
landscape: {
changePoint:640,
visibleItems: 2
},
tablet: {
changePoint:768,
visibleItems: 3
}
}
});
});
</script>6)运行代码即可
发表评论