异形滚动

异形滚动效果图.gif

1、原理的揭示

前言：图片大小处理问题的解决，当我们只改变盒子大小，图片会溢出，无法充满这个盒子。设置图片的宽高为 100%

从最低层的背景图开始解析。五个显示的图，两个隐藏的图。一个七个基本图样。

背景图

思路：

• 放置背景图片（li 绝对定位，再用图片填充）
• 点击时改变动画的 JSON

2、JSON的优化

• 获取 targetJSON 使用数组接受 JSON放进数组。

var JSONarr = [];
        //把所有的状态都推入数组：
        for(var i = 0 ; i < lis.length ; i++){
            JSONarr.push({
                "width"     : parseInt(fetchComputedStyle(lis[i],"width")),
                "height"    : parseInt(fetchComputedStyle(lis[i],"height")),
                "left"  : parseInt(fetchComputedStyle(lis[i],"left")),
                "top"   : parseInt(fetchComputedStyle(lis[i],"top"))
            });
        }

        console.log(JSONarr);

• 右按钮的监听使用 for 进行优化，防止手写。

        //右按钮的监听
        rightBtn.onclick = function(){
            //让1、2、3、4、5、6元素都分别变为数组中的0、1、2、3、4、5的状态
            for(var i = 1 ; i <= 6 ; i++){
                animate(lis[i],JSONarr[i - 1],600,"BounceEaseOut");
            }
        }

3、增加二次点击效果

这里是个难点今天，学了半天就是想不明白为什么不二次轮播，下午去吃了个饭，再仔细想想终于明白是怎么回事了。
以右击按钮为例，当我们点击的时候，图片依据 动画 左移。这里只是借助了动画改变了 li 的位置，li 盒子的编号依然没变，所以当我们再次点击盒子只是变到本身现在所处位置。我错就错在盒子转移到另一个盒子，认为他的盒子编号也随之发生改变。
想明白这点，我们就可以在动画完成后，改变盒子编号。这样下次的点击效果就会生效。又因为我们得到的 li 是一个类数组对象不能通过pop等进行操作。先把它放进一个数组里。

var liArray = [];   //存放每个li的数组 新增1

        var JSONarr = [];

        //把所有的状态都推入数组：
        for(var i = 0 ; i < lis.length ; i++){
            JSONarr.push({
                "width"     : parseInt(fetchComputedStyle(lis[i],"width")),
                "height"    : parseInt(fetchComputedStyle(lis[i],"height")),
                "left"  : parseInt(fetchComputedStyle(lis[i],"left")),
                "top"   : parseInt(fetchComputedStyle(lis[i],"top")),
                "opacity" : parseInt(fetchComputedStyle(lis[i],"opacity"))
            });
            //liArray就和lis是一样的结构，lis是类数组对象，而liArray是数组 新增2
            liArray.push(lis[i]);
        }
    //右按钮的监听
        rightBtn.onclick = function(){
            //让1、2、3、4、5、6元素都分别变为数组中的0、1、2、3、4、5的状态
            for(var i = 1 ; i <= 6 ; i++){
                animate(liArray[i],JSONarr[i - 1],600,"BounceEaseOut");
            }
            //让0号元素瞬移
            for(var k in JSONarr[6]){
                liArray[0].style[k] = JSONarr[6][k] + "px";
            }

            //交换身份！！新增3
            liArray.push(liArray.shift());
 
        }

4、设置节流，自动轮播，和opacity

设置 opacity 主要是兼容左右轮播时的淡入淡出。
函数节流，因为所有的 li 盒子都是动的，所以节流我们只需要随便设置一个盒子。