使用jq和flip插件来做了一个幻灯片翻转效果小demo

来源：互联网发布：拆分资金盘源码编辑：程序博客网时间：2024/06/05 05:57

我们的实验室官网终于要做了，但由于后台的部长跟前端的小妹妹写代码太慢了，我不得不插手帮他们写点小demo，所以今日无聊就找了一个不错的插件来写了，本来是找到turn.js的，因为体积比较少，而且每啥依赖，官网的demo效果是很流畅的，但自己按着它写一次，发觉很不流畅，有点像“成龙”广告的反面教材，呵呵，写出来跟看的不同。所以就找到了flip，感觉效果还不错。

官网：http://jqueryui.com/

废话少说，先看代码：

html:

<!DOCTYPE HTML><html lang="en-US"><head>  <meta charset="UTF-8">  <title></title>  <link rel="stylesheet" href="../css/text.css">  <script type="text/javascript" src="../js/jquery-1.7.min.js"></script>  <script type="text/javascript" src="../js/jquery-ui-1.7.2.custom.min.js"></script>  <script type="text/javascript" src="../js/jquery.flip.min.js"></script>  <script type="text/javascript" src="../js/text.js"></script></head><body>  <div class="flip-box">    <div class="flip-item">      <img src="../image/hci.jpg" alt="" class="flip-item-img">    </div>    <div class="flip-item">      <img src="../image/hci.jpg" alt="" class="flip-item-img">    </div>    <div class="flip-item">      <img src="../image/hci.jpg" alt="" class="flip-item-img">    </div>  </div></body></html>

css:

*{margin: 0;padding: 0;}.flip-box{width: 900px;height: 600px;margin: auto;}.flipitem{}

js:

window.onload = function(){  Slide.play();}var Slide = {  play : function(){    this.init();    this.start();  },  init : function (){    var $flipitems = $('.flip-item');    var $n = $flipitems.size();    var $color = '#3c6';    $flipitems.not($('.flip-item:first')).hide();  },  start : function(){    setInterval(function(){      var $flipitems = $('.flip-item');      var $n = $flipitems.size();      var $color = '#3c6';      var $flipitem = $('.flip-item:visible');      var $next = $flipitem.next();      var $last = $('.flip-item:last');      if($flipitems.index($flipitem)==$n - 1){         $flipitems.hide();        $next = $('.flip-item:first').next();      };      $flipitem.hide();      $next.show().flip({        direction:'rl',        color:$color      });      return false;    },3000);  }};

注意:那些依赖的包我无法上传了哦，呵呵！

效果图：（顺便亮一下我们实验室的照片，哈哈）