together项目进度报告3

这周至今完成了主页轮播图和底部导航小圆点的切换效果，用的原生js来写，可以方便控制一个轮播图的运动曲线效果，但是现在只是一个变减速运动方式。

首先为了书写的方便性先封装了一个$()函数来模仿JQ里面的获取id方式。

function $(id){
    return document.getElementById(id);
}

获取轮播图的div之后就要改变其定位来实现轮播

轮播图的html部分为 

<div class="slide w fl pr">
    <ul class="h w inner pa" id="slide">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <i class="point pa ns" id="point">
        <ul>
            <li class="focus"><i>1</i></li>
            <li><i>2</i></li>
            <li><i>3</i></li>
            <li><i>4</i></li>
            <li><i>5</i></li>
        </ul>
    </i>
</div>

第一个ul包含轮播图，第二个ul包含的是下方的一个导航点，用一个新定义的i来承载
之后用js来填充轮播图的背景图片和轮播图的宽度

var SlideImg = $('slide').getElementsByTagName("li"); //定义SlideImg为一个NodeList
for (var a = 1; a <= SlideImg.length; a++){ //处理每个SlideImg的每个节点
    var obj = SlideImg[a-1]; //定义到每一个li
    obj.style.width = 100/6 + "%"; //根据轮播图的个数定义每个轮播图宽度
    if(a == SlideImg.length){ //定义最后一张轮播图使前后连贯
        obj.style.backgroundImage = "url(image/slideimg"+1+".png)"; //填充轮播图每个span背景
        obj.style.width = $('slide').offsetWidth/SlideImg.length + "px";//避免因宽度不够而留出空白
    }
    else{ //填充每一个li的背景图片
        obj.style.backgroundImage = "url(image/slideimg"+a+".png)";
    }
}

再之后是用两个定时器来实现轮播图效果，同时轮播使用的是一个变减速运动的方式，让交互更加自然。

var slideNum = 0, move1 = null, move2 = null; //设置两个定时器来控制运动和自动换页
var PointList = $('point').getElementsByTagName("li"); //获取下方点的NodeList
function move(){ //开始移动
    var a = 0,num = 0;
    clearInterval(move1);
    move1 = setInterval(moveUp,30);
    function moveUp(){
        if(a < 99.95){
            num = a + (slideNum*100);
            //console.log(a);
            //console.log(num);
            $('slide').style.left = "-"+num+"%";
            //使a月激励目标位置速度越小，做减速运动
            a += (100 - a)/10;
        }
        else{
            clearInterval(move1);
            if(slideNum == SlideImg.length - 2) {
                slideNum = -1;
                $('slide').style.left = "0";
            }
            slideNum += 1;
            //console.log(slideNum);
            $('slide').style.left = "-"+slideNum*100+"%";
            //point对应轮播图
            for (var j = 0; j < PointList.length; j++){
                if(j == slideNum){
                    PointList[j].className = "focus";
                }
                else{
                    PointList[j].className = "";
                }
            }
            a = 0;
        }
    }
}
move2 = setInterval(move,4000);

之后再加上每一个点对应一个li

var onFoc = 0;
var oFoc = null;
for (var i = 0; i < PointList.length; i++){
    PointList[i].index = i;
    PointList[i].onmouseover = function(){
        for (var j = 0; j < PointList.length; j++){
            PointList[j].className = "";
            this.className = "focus";
        }
    }
    PointList[i].onclick = function(){
        clearInterval(move1);
        clearInterval(move2);
        var k = this.index;
        var l = slideNum;
        slideNum = k;
        move2 = setInterval(move,4000);
        onFoc = l*100;
        clearInterval(oFoc);
        oFoc = setInterval(function(){
            onFoc += (100*k - onFoc)/10;
            //console.log(slideNum);
            //console.log(Math.abs(onFoc-k*100));
            if(Math.abs(onFoc-k*100) < 0.05){
                onFoc = Math.round(onFoc);
                $('slide').style.left = "-"+onFoc+"%";
                clearInterval(oFoc);
            }
            else{
                $('slide').style.left = "-"+onFoc+"%";
            }
        },10);
    }
}

现在的工作大概这么多，之后的时间需要补上一些注释以及改进一些细节的调整。