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

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

然后是排除.left,满足.left的条件是$index==cur-1||(cur==0&&$index==img_list.size()-1),它的否定是$index!=cur-1&&(cur!=0||$index!=img_list.size()-1),这就和添加.hide的条件的左边部分一样了。

排除.right也是类似的。

把这两个部分组合起来就可以保证.left,.middle,.right,.hide这4个类之间是互斥的。

当然也可以利用css优先级，让.left,.middle,.right类的优先级高于.hide,这样添加.hide的判定条件会简单很多。为了严谨些，就没有用这种方式。

圆点序列

cur==$index让'亮'的圆点和当前指针同步。
到这里,任意改变roundabout.cur=?都可以呈现roundabout布局。

图片滚动

定义css3 animation

滚动过程中，要滚动图片有4种动画状态，以向右滚动为例

1. 左边可见的图片的上（左）一张图片，不可见=>在可见部分左边，部分可见

2. 原来左边可见的图片，在可见部分左边，部分可见=>中间，全部可见

3. 原来中间全部可见的图片，中间，全部可见=>在可见部分右边，部分可见

4. 原来右边可见的图片，在可见部分右边，部分可见=>不可见
   这里用css3 animation

@keyframes to-right1 {//向右滚动
  0% {
    width: 530px;
    height: 100px;
    opacity: 0;
    z-index: 0;
    margin-top: 85px;
    left: -530px;
  }
  100% {
    width: 530px;
    height: 224px;
    opacity: 0.4;
    z-index: 1;
    margin-top: 23px;
    left: 0;
  }
}
@keyframes to-right2 {
  0% {
    width: 530px;
    height: 224px;
    opacity: 0.4;
    z-index: 1;
    margin-top: 23px;
    left: 0;
  }
  100% {
    width: 640px;
    height: 270px;
    opacity: 1;
    z-index: 2;
    margin-top: 0;
    left: 275px;
  }
}
@keyframes to-right3 {
  0% {
    width: 640px;
    height: 270px;
    opacity: 1;
    z-index: 2;
    margin-top: 0;
    left: 275px;
  }
  100% {
    width: 530px;
    height: 224px;
    opacity: 0.4;
    z-index: 1;
    margin-top: 23px;
    left: 660px;
  }
}
@keyframes to-right4 {
  0% {
    width: 530px;
    height: 224px;
    opacity: 0.4;
    z-index: 1;
    margin-top: 23px;
    left: 660px;
  }
  100% {
    width: 530px;
    height: 100px;
    opacity: 0;
    z-index: 0;
    margin-top: 85px;
    left: 1190px;
  }
}
...

可以看到，动画无非是在.hide,.left,.middle,.right这4个状态间切换。

@keyframes to-right1 {//向右滚动
    0% {
      //.hide
    }
    100% {
      //.left
    }
}
@keyframes to-right2{
    0% {
        //.left
    }
    100% {  
        //.middle
    }
}
@keyframes to-right3{
    0% {
        //middle
    }
    100% {  
        //right
    }
}
@keyframes to-right4{
    0% {
        //right
    }
    100% {  
        //hide1
    }
}
...

为了方便编码，用less

.state(@width,@height,@opacity,@z-index,@margin-top,@left){
    width: @width;
    height: @height;
    opacity: @opacity;
    z-index: @z-index;
    margin-top: @margin-top;
    left:@left;
}
.middle(){
    .state(640px,270px,1,2,0,275px);
}
.left(){
    .state(530px,224px,0.4,1,23px,0);
}
.right(){
    .state(530px,224px,0.4,1,23px,660px);
}
.hide(){
    .state(530px,100px,0,0,85px,-530px);
}
.hide1(){
    .state(530px,100px,0,0,85px,1190px);
}
.middle{
    .middle();
}
.left{
    .left();
}
.right{
    .right();
}
.hide{
    .hide();
}
@keyframes to-right1{//向右滚动
    0% {
        .hide();
    }
    100% {  
        .left();
    }
}
@keyframes to-right2{
    0% {
        .left();
    }
    100% {  
        .middle();
    }
}
@keyframes to-right3{
    0% {
        .middle();
    }
    100% {  
        .right();
    }
}
@keyframes to-right4{
    0% {
        .right();
    }
    100% {  
        .hide1();
    }
}
...

点击左右箭头，图片滚动