旋转木马轮播图

动画函数animate

1. 主要使用函数animate动画函数
   animate语法：animate（params,[speed],[easing],[fn]）
   参数：params：想要更改的属性，以对象的形式传递，必须写
   如：animate（{
   width：100，
   height：100，
   backgroundColor：‘red’，
   borderLeft：10
   }，1000，function（）{}）
   //如果是复合属性则需要用驼峰命名法

代码：

$(function(){
    var arrJSON=[
        { //1
          width:400,
          top:70,
          left:50,
          opacity:0.2,
          "z-index": 2
        }, { //2
            width:600,
            top:120,
            left:0,
            opacity:0.8,
            "z-index": 3
        }, { //3
            width:800,
            top:100,
            left:200,
            opacity:1,
            "z-index": 4
        }, { //4
            width:600,
            top:120,
            left:600,
            opacity:0.8,
            "z-index": 3
        }, { //5
            width:400,
            top:70,
            left:750,
            opacity:0.2,
            "z-index": 2
        },
    ];
    //旋转木马的原理：每个盒子一套样式;点击左/右侧按钮的时候，
    //把数组中的第/最后一个添加到数组的最前面/后面;
    //需求1: 页面加载的时候，每个li标签享受一套样式;(鼠标进入显示，移开隐藏)
    //需求2: 点击右侧按钮，删除数组中最后一个，添加到数组的最前面;
    //需求3: 点击左侧按钮，删除数组中第一个，添加到数组的最后面;

    //旋转木马的原理：每个盒子一套样式;点击左/右侧按钮的时候
    $(".slide li").each(function(index,ele){
        $(ele).css('style',arrJSON[index]['z-index']);
        $(ele).animate(arrJSON[index],1000);
    });
    // (鼠标进入显示，移开隐藏)
    //hover([over,]out):事件切换 相当于mouseenter和mouseleave
    $(".wrap").hover(function(){
        $(".btn").fadeTo(100,1); //fadeTo（[speed],opacity）：渐进式调整到指定的不透明度 
    },function(){
        $(".btn").fadeTo(100,0);
    });
    //点击右侧按钮，删除数组中最后一个，添加到数组的最前面;
    var flag=true;//设置节流阀
    $("#next").click(function(){
        if(flag==false){
            return;
        }
        flag=false;
        var last=arrJSON.pop();
        arrJSON.unshift(last);
        $(".slide li").each(function(index,ele){
            $(ele).css('style',arrJSON[index]['z-index']);
            $(ele).animate(arrJSON[index],1000,function(){
                flag=true;//当动画结束时再打开
            });
        });
    })//结束右click
    //需求3: 点击左侧按钮，删除数组中第一个，添加到数组的最后面;
    $("#pre").click(function(){
        if(flag==false){
            return;
        }
        flag=false;
        var first=arrJSON.shift();
        arrJSON.push(first);
        $(".slide li").each(function(index,ele){
            $(ele).css('style',arrJSON[index]['z-index']);
            $(ele).animate(arrJSON[index],1000,function(){
                flag=true;
            });
        });
    })
});