2018-11-18

//获取轮播图的ul元素
var banner = document.getElementById('banner_ul');
//获取轮播图里的每个图片（数组）
var banner_li = document.getElementById('banner_ul').getElementsByTagName('li');
//获取轮播图底部的按钮ul元素
var banner_btn_ul = document.getElementById('banner_ul');
//获取轮播图按钮的每个按钮（数组）
var banner_btn = document.getElementById('banner_btn').getElementsByTagName('li');
// 参数node：将要获取其计算样式的元素节点
function getStyle(node) {
    var style = null;
    
    if(window.getComputedStyle) {
        style = window.getComputedStyle(node,null);
    }else{
        style = node.currentStyle;
    }
    return style;
}

//通过底部按钮改变图片
//1.对底部按钮进行监视
for (var i=0;i < banner_btn.length;i++) {
    banner_btn[i].onclick = function(){
        btn_remove(this);
    }
}
//2.获取到点击的是第几个按钮，通过索引进行变换
function btn_remove(obj){
    //2.1获取点击的是第几个按钮
    for (var i = 0;i < banner_btn.length; i++) {
        if (banner_btn[i] == obj) {
            break;
        }
    }
    //2.2改变轮播图片left的值
    for (var j = 0;j < banner_btn.length; j++) {
        banner_li[j].style.left = "-" + i*1000 + "px";
    }
    //2.3改变颜色
    setColor();
}

function Left(){
    //获取当前轮播图的left位置
    var cur = getStyle(banner_li[0]).left;
    cur = parseInt(cur);
    //因为当元素移动时，left的属性值不是一个整数
    //但是仍在(-5000px ~ 0px)之间，所以还得判断left的值是不是整数
    if (cur <= 0 && cur > -5000 && cur%1000==0) {
        cur = cur - 1000 + "px";
        //给每个轮播图里的li元素改变其left值
        for (var i = 0; i < banner_li.length; i++) {
            banner_li[i].style.left = cur;
        }
        //改变底部按钮的颜色
        setColor();
    }
    else if (cur == -5000){
        for (var i = 0; i < banner_li.length; i++) {
            banner_li[i].style.left = "0px";
        }
        setColor();
    }
}


function Right(){
    //获取当前轮播图的位置
    var cur = getStyle(banner_li[0]).left;
    cur = parseInt(cur);
    if (cur >= -5000 && cur < 0 && cur%1000==0) {
        cur = cur + 1000 + "px";
        for (var i = 0; i < banner_li.length; i++) {
            banner_li[i].style.left = cur;
        }
        setColor();
    }
    else if (cur == 0){
        for (var i = 0; i < banner_li.length; i++) {
            banner_li[i].style.left = "-5000px";
        }
        setColor();
    }
}

//改变底部按钮颜色
function setColor() {
    //定义目前的中间图片所对应的那个按钮
    //利用left的值除以图片的长度
    var index_btn = parseInt(banner_li[0].style.left) / -1000;
    //给每个按钮的透明度设为0.3
    for (var i = 0; i < banner_btn.length; i++) {
        banner_btn[i].style.opacity = "0.3";
    }
    //给目前显示图片所对应的按钮单独设置透明度
    banner_btn[index_btn].style.opacity = "1";
}
//定时器
function autoPlay() {
    timer = setInterval(function(){
        Left();
    },3000)
}
autoPlay();

//当鼠标移入路轮播图的盒子时，停止计时器，移除开始。
//(获取banner时，不能使用class获取，测试使用class获取，定时器无用)
var bigBanner = document.getElementById('banner');
bigBanner.onmouseover = function () {
    clearInterval(timer);
}
bigBanner.onmouseout = function () {
    autoPlay();
}