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

来源：互联网发布：住香港做淘宝的好处编辑：程序博客网时间：2024/05/03 12:18

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

0 0