发表于： 2017-03-21 20:27:02

任务十五

今天完成的事情

1. 学习轮播图的实现方式。
2.完成轮播图的基本样式。
3.学习动画函数的封装以及实现，具体代码如下（代码来源于互联网）

function animate(obj,json,fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var flag = true; 
        for(var attr in json){
          var current = 0;
            if(attr == "opacity")
            {
                current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
                console.log(current);
            }
            else
            {
                current = parseInt(getStyle(obj,attr));
            }
            var step = ( json[attr] - current) / 10; 
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //判断透明度
            if(attr == "opacity") 
            {
                if("opacity" in obj.style)  // 判断 我们浏览器是否支持opacity
                {
                    // obj.style.opacity
                    obj.style.opacity = (current + step) /100;
                }
                else
                {  // obj.style.filter = alpha(opacity = 30)
                    obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";

                }
            }
            else if(attr == "zIndex")
            {
                obj.style.zIndex = json[attr];
            }
            else
            {
                obj.style[attr] = current  + step + "px" ;
            }

            if(current != json[attr]) 
            {
                flag =  false;
            }
        }
        if(flag) 
        {
            clearInterval(obj.timer);
            //alert("ok了");
            if(fn) 
            {
                fn(); // 函数名 +  （）  调用函数  执行函数
            }
        }
    },10)
}
function getStyle(obj,attr) {
    if(obj.currentStyle)  // ie 等
    {
        return obj.currentStyle[attr];  // 返回传递过来的某个属性
    }
    else
    {
        return window.getComputedStyle(obj,null)[attr]; 
    }
}

明天计划的事情

1.完成轮播图组件，并对轮播图进行封装。

遇到的问题

1.最开始以为轮播图很简单，设置一个settimeout就可以，但是仔细观察后发现轮播图的功能实际上还是挺复杂的。将功能抽象出来。有以下几个。

鼠标放在banner外时，图片自动轮播.。
鼠标放在banner上，图片停止轮播。
图片上左右两侧分别有一个按钮，点击可以使图片分别左右滑动
图片下侧有一排圆形按钮，每个按钮分别与图片对应，点击圆形按钮时，会跳转到相应的图片。
2.实现思路
首先页面结构上中间放置一个div，宽度100%，撑满父级元素，图片全部绝对定位。
第一张图片放在中间，其余的图片放在div的右侧。
每次点击左侧按钮时，第一张图片向左滑动，滑到div的左侧，同时第二张图片也向左滑动，滑到div的中间。大致的实现思路是这样，其余的小细节需要自己写if判断语句来实现。