引入插件
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery.flexisel.js"></script>
htmljavascript
<ul id="flexisel"> <li><img src="images/logo-1.png" /></li> <li><img src="images/logo-2.png" /></li> <li><img src="images/logo-3.png" /></li> <li><img src="images/logo-4.png" /></li> <li><img src="images/logo-5.png" /></li> </ul>
jshtml
$(window).load(function() { $("#flexisel").flexisel({ visibleItems: 4, //一行显数的个数 animationSpeed: 200, //动画时间 autoPlay: false, //自动播放 autoPlaySpeed: 3000, //播放间隔时间 pauseOnHover: true, //鼠标悬浮是否中止播放 clone:false, //是否使用克隆 enableResponsiveBreakpoints: true, //是否开启响应式 responsiveBreakpoints: { portrait: { //项目名,可随意命名 changePoint:480, //屏幕最大像素,意思为当屏幕最大像素为480时,只显示一个Item,即例子只显示一张图片。 visibleItems: 1 //只显示一个Item,下面的雷同 }, landscape: { changePoint:640, visibleItems: 2 }, tablet: { changePoint:768, visibleItems: 3 } } }); });
而后就完成了 java