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

原创 Jack  2018-11-16 阅读 952 次 评论 0 条
摘要导读

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

描述:flexisel.js响应适应屏幕宽度旋转木马插件,效果很好.它设置为启用自动播放,定义动画的速度和悬停.特点:1)Flexisel 将顺应需求适应屏幕宽度变小;2)根据项目的数量可以更改显示的屏幕宽度;3)其他选项包括自动播放,动画速度时右和左.使用方法:1)下载flexisel.js插件2)引入js文件

描述:flexisel.js响应适应屏幕宽度旋转木马插件,效果很好.它设置为启用自动播放,定义动画的速度和悬停.

特点:

1)Flexisel 将顺应需求适应屏幕宽度变小;

2)根据项目的数量可以更改显示的屏幕宽度;

3)其他选项包括自动播放,动画速度时右和左.

201811063476_142.jpg

使用方法:

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)运行代码即可

本文地址:https://www.sxger.com/blog/27.html
版权声明:本文为 盛星阁 原创文章,版权归 Jack 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?