您的位置：首页 > Web前端 > JQuery

基于jQuery的响应式旋转木马插件flexisel.js

2016-01-07 21:14 1011 查看

描述：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）运行代码即可

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 插件响应式 jquery

相关文章推荐

新的分享

章节导航