js第一次轮播图

轮播图功能描述：
上一张图片按钮、下一张图片按钮、角标选择图片按钮、图片切换后标题切换。

遇到的问题：
curIndex全局变量想了很长时间如何使用。

解决：
在角标中，将每个角标的下标存放到curIndex，可以直接使用计算marginLeft。

在上一张和下一张中，都只是一个div标签，所以不能利用下标存放curIndex。

点击上一张：每次点击用if判断curIndex的值，如果大于0，减减，切换到上一张。
如果等于0了，说明回到了第一张图片，将curIndex重新赋值为imgs.children.length-1。（图片的个数-1，就是最后一张图片的下标）

点击下一张：每次点击用if判断curIndex的值，如果小于imgs.children.length-1，最后一张图片的下标，加加，切换到下一张图片。
如果等于imgs.children.length-11，最后一张图片的下标，说明到了最后一张图片，将curIndex重新赋值为0回到第一张图片。

var left  = document.getElementsByClassName('left')[0];     //上一张按钮div
var imgs = document.getElementsByClassName('imgs')[0];      //存放图片的div
var title = document.getElementsByClassName('title')[0];    //标题div
var timer = null;   //动画切换计时器
var curIndex = 0;   //当前显示第几张轮播图
/**
 * 上一张按钮
 */

left.addEventListener('click',last); 
function last(){
    //利用cuIndex记录，点击一次cuIndex减一，当cuIndex为0时说明到了最后一张，再重新赋值。
    if(curIndex > 0){
        curIndex--;
    }else{
        curIndex = imgs.children.length-1;  
    }
    setStatus();
        
} 

/**
 * 下一张按钮
 */
var right  = document.getElementsByClassName('right')[0];
right.addEventListener('click',next); 
function next(){
    //利用cuIndex记录，点击一次cuIndex加一，当cuIndex大于img.length -1时，说明到了最后一张，再重新赋值
    if(curIndex < imgs.children.length-1){
        curIndex ++;
    }else{
        curIndex = 0;
    }
    setStatus();
} 

/**
 * 角标设置
 */

var a_jiaobiao = document.getElementsByClassName('jiaobiao')[0];
for(let i = 0;i<a_jiaobiao.children.length;i++){
    a_jiaobiao.children[i].addEventListener('mouseenter',function(){
        curIndex= i;
        setStatus();
    })
}

/**
 * 动画效果
 */
function setStatus(){
    for (var i = 0; i < a_jiaobiao.children.length; i++) {
        if(i == curIndex){
            a_jiaobiao.children[i].style.backgroundColor = "#369";
        }else{
            a_jiaobiao.children[i].style.backgroundColor = "#61687c";
        }
        
    }

    //开始值
    var start = parseInt(imgs.style.marginLeft);  
    var start2 = parseInt(title.style.marginTop); 
    //  目标值   图片向左移动       下标 * -100                     
    var end = curIndex * -100;
    var end2 = curIndex * -30;
    //距离
    var dis = end - start;
    var dis2 = end2 - start2;
    //完成变化的时间
    var duration = 500;
    //速度
    var speed = dis / duration;
    var speed2 = dis2/duration;
    //如果动画重复，先清除动画
    if(timer){
        clearInterval(timer);
    }
    timer = setInterval(function(){
        start += speed * 20;
        start2 += speed2 * 20;
        imgs.style.marginLeft = start + "%"; 
        title.style.marginTop = start2 + "px"; 
        if(Math.abs(end-start) < 1){
            imgs.style.marginLeft = end + "%"; 
            title.style.marginTop = end2 + "px";
            clearInterval(timer); 
        }
        
    },20);
}