关于技术您现在的位置是:首页 > 关于技术

抽屉式轮播特效案例

头像 2019-02-26 17:06:06 126 人已围观 0 条评论

简介

轮播图有两种常见的切换形式,一种是左右滑动切换,一种是淡入淡出切换,而且基本上都带有左右导航箭头和底部焦点展示,今天呢,我们不做这些,尝试换一种轮播效果,叫抽屉式(或手风琴式)轮播特效

首页是整个网站的门面,当然要做的好看一点,轮播图就是最常用的效果之一,大家已经见得很多了,基本每个稍大型页面首页都会有一个图片轮播效果的展示,有的是手动点击轮播,当然最常见的还是带有自动轮播的效果。

轮播图有两种常见的切换形式,一种是左右滑动切换,一种是淡入淡出切换,而且基本上都带有左右导航箭头和底部焦点展示,今天呢,我们不做这些,尝试换一种轮播效果,叫抽屉式(或手风琴式)轮播特效(先看gif图)。

那么这个特效的实现也很简单,我们直接把代码捎上:

页面布局跟其他轮播效果没什么两样,简单布局一下,css的话自己写,这里就不提供了,需要的也可以在文末查看在线演示效果页面里审查元素即可。

<div class="round_box">
  <div class="round_item">
    <img src="images/1.jpg" alt="第一张图">
    <p class="round_tit">爱上新鲜</p>
  </div>
  <div class="round_item">
    <img src="images/2.jpg" alt="第二张图">
    <p class="round_tit">一衣多穿</p>
  </div>
  <div class="round_item">
    <img src="images/3.jpg" alt="第三张图">
    <p class="round_tit">测评擂台</p>
  </div>
  <div class="round_item">
    <img src="images/4.jpg" alt="第四张图">
    <p class="round_tit">达人心经</p>
  </div>
  <div class="round_item">
    <img src="images/5.jpg" alt="第五张图">
    <p class="round_tit">大咖卖场</p>
  </div>
</div>

结构有了,要想有效果还得是脚本,那么我们在上脚本之前,记得先引入jQuery文件

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
  var aItem = $(".round_box .round_item");
  var aTit = aItem.find(".round_tit");
  var oBoxWidth = $(".round_box").width();
  var oTitWidth = aTit.outerWidth();
  var arr = [];
  var i = 0;
  var round_timer = null;
  var loop = aItem.length-1;
  var loopforward = true;

  // 初始化每个item的位置
  aItem.each(function(i){
    $(this).css("left",i*oTitWidth+"px");
    arr[i] = i*oTitWidth; // 保存每一个item的位置left值
  });

  // 给每一个标题round_tit添加点击事件
  aTit.on("click",function(){
    var _index = $(this).parent().index(); // 获取当前索引值
    loopforward = _index >= loop ? true : false;
    loop = _index;
    animateTo();
  });

  // 鼠标放到整个round_box上时清除定时器,离开时开启定时器
  $(".round_box").hover(function(){
    clearInterval(round_timer);
    },function(){
    round_timer = setInterval(autoRound,2000);
  });
  // 设置并开启定时器
  round_timer = setInterval(autoRound,2000);
  // 自动轮播
  function autoRound(){
    if(loopforward == true){
      loop --;
      if(loop == 0){
        loopforward = false;
      }
    }else if(loopforward == false){
      loop ++;
      if(loop == aItem.length-1){
        loopforward = true;
      }
    }
    animateTo();
  }
  // 运动函数
  function animateTo(){
    aItem.each(function(i){
    // 判断当前索引之前的item元素
      if(i <= loop){
        $(this).animate({left:arr[i]+"px"},400);
      }else{
        $(this).animate({left:arr[i]+oBoxWidth-aItem.length*oTitWidth+"px"},400);
      }
    });
  }
</script>

以上就是脚本部分,我们来简单说一下实现原理,其他的自己看,有什么不懂或是有其他想法欢迎留言。

我们每一个round_item元素都是绝对定位,通过js改变元素的left值来改变元素的相对位置,用jq的animate方法加上过渡动画就ok了。

其中定义了一个变量loopforward,是一个布尔值,用来判断我们的round_item元素是往前轮播还是往后轮播,因为我们最终的轮播效果是先往右滑动;到第一张图片的时候,反过来往左滑动;然后到最后一张图片的时候,再反过来往右滑动;如此反复运动轮播。所以我们要有一个参考来判断当前的轮播方向,于是就定义了一个loopforward变量。

其他的就很容易理解了,想看最终效果的狠戳这里吧,在页面中审查元素,代码就有了,你也去敲一遍试试吧,我们,加油!

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号