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

最新推荐文章于 2024-03-25 09:59:33 发布

noonnightstorm

最新推荐文章于 2024-03-25 09:59:33 发布

阅读量5.4k

点赞数

本文链接：https://blog.csdn.net/noonnightstorm/article/details/8530205

版权

我们的实验室官网终于要做了，但由于后台的部长跟前端的小妹妹写代码太慢了，我不得不插手帮他们写点小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);
  }
};

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

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