avalon js+css3实现roundabout 图片轮播(1/5)

来源：网络整理时间:2016-05-09 关键词:avalon,round

本篇文章主要介绍了"avalon js+css3实现roundabout 图片轮播"，主要涉及到avalon,round方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： roundabout效果效果就像优酷综艺频道页面的图片轮播。本屌之前做过这个roundabout,参见仿优酷频道首页的图片切换效果,不过用的是类似jquery的...

roundabout效果

效果就像优酷综艺频道页面的图片轮播。
本屌之前做过这个roundabout,参见仿优酷频道首页的图片切换效果,不过用的是类似jquery的库做的。尽管js代码不到200行，但还是显得有点复杂。于是乎，本屌盘算着可不可以用更少的代码完成这个效果。
顺便说一下，如果有读者想造轮子，可以直接看优酷的js代码，基本上都没压缩，封装这个效果的代码在posterTvGrid.js
下面是本屌做出来的效果
http://v.youku.com/v_show/id_XMTM1ODk4NDQyNA==.html

要求

点击左右箭头，图片滚动
点击下面图片索引，如果点击的图片是当前图片或与当前图片相邻的图片，则图片滚动；否则，所有图片先变小，然后点击的图片和与之相邻的图片，在相应位置动态变大。
代码尽可能少，尽可能清晰

布局

图片的位置有2种情况：

不可见，即不是前面的3张图片，这里类名.hide

.hide {
  width: 530px;
  height: 100px;
  opacity: 0;
  z-index: 0;
  margin-top: 0;
  left: -530px;
}

可见的3张图片，按位置具体可分为.left,.middle,.right

.middle {
  width: 640px;
  height: 270px;
  opacity: 1;
  z-index: 2;
  margin-top: 0;
  left: 275px;
}
.left {
  width: 530px;
  height: 224px;
  opacity: 0.4;
  z-index: 1;
  margin-top: 23px;
  left: 0;
}
.right {
  width: 530px;
  height: 224px;
  opacity: 0.4;
  z-index: 1;
  margin-top: 23px;
  left: 660px;
}

每个类的6个属性都是和图片尺寸（640*270）配合好的，使得动画很自然。当然后面会用到css3 animation，使每张图片的这6个属性进行相应的变化。
下面把上面类添加到相应图片上

    var roundabout=avalon.define({
        $id:'roundabout',
        img_list:[],
        cur:0,//当前页
        ...
    });

cur相对于指针，表示当前中间(可见范围最大)图片是图片列表里的哪张图片，所以会有(从左向右看)

cur=>.middle
cur+1=>.right
cur-1=>.left
其他=>.hide

插值表达式中的逻辑运算符

这里就要把逻辑运算符用到插值表达式里

1 2 3 4 5 下一页

上一篇：Bootstrip 的select的数据绑定问题 下一篇：Nodejs（八）

avalon js+css3实现roundabout 图片轮播(1/5)

相关图片

相关文章