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

    var roundabout=avalon.define({
        $id:'roundabout',
        img_list:[],
        cur:0,//当前页
        jump:function(i,dir){//dir:滚动方向
            roundabout.cur=i;
        }
    });

    

            
        
        ...
    

jump方法的dir参数后面会用到。
这里还没有添加动画类，只能进行没有动画的滚动。

添加动画

//所有的动画类
var animate_class='to-right1 to-right2 to-right3 to-right4 to-left1 to-left2 to-left3 to-left4';
...
jump:function(i,dir){
    if(dir==1){//向右滚 cur-1
        avalon($('img'+prev(i))).removeClass(animate_class).addClass('to-right1');
        avalon($('img'+i)).removeClass(animate_class).addClass('to-right2');
        avalon($('img'+next(i))).removeClass(animate_class).addClass('to-right3');
        avalon($('img'+next(next(i)))).removeClass(animate_class).addClass('to-right4');
    }else{//向左滚 cur+1
        avalon($('img'+next(i))).removeClass(animate_class).addClass('to-left1');
        avalon($('img'+i)).removeClass(animate_class).addClass('to-left2');
        avalon($('img'+prev(i))).removeClass(animate_class).addClass('to-left3');
        avalon($('img'+prev(prev(i)))).removeClass(animate_class).addClass('to-left4');
    }
    roundabout.cur=i;
}
...
function prev(now){//上一页
    return now==0?roundabout.img_list.size()-1:now-1;
}
function next(now){//下一页
    return now==roundabout.img_list.size()-1?0:now+1;
}

几点说明

• 这里的removeClass方法和jquery中的一样，当传入参数像上面animate_class变量，多个类以空格分开时，对目标删除多个类(如果有的话)。

• prev,next方法用来得到上一张图片和下一张图片的在图片列表中的索引.注意next(next(i))不等于next(i+1).

• 添加动画类之前，要先删除所有可能存在的动画类。

点击圆点，图片滚动

和点击左右箭头，图片滚动的动画不一样，这里对目标图片及其左右图片是一个从小变大的动画效果。