// 上部分新闻效果
var Xw = document.getElementsByClassName('xw');
var XiangYou = document.getElementsByClassName('xiangyou');
var ColorRed = document.getElementsByClassName('color-red');
var VerticalLine = document.getElementsByClassName('vertical-line');
// 鼠标移入
Xw[0].onmouseover = function () {
    VerticalLine[0].style.transition = 'height 0.3s';
    VerticalLine[0].style.height = '0';
    ColorRed[0].style.color = 'red';
    XiangYou[0].style.transition = 'margin-left 0.3s'
    XiangYou[0].style.marginLeft = '20px';
    XiangYou[1].style.transition = 'margin-left 0.3s'
    XiangYou[1].style.marginLeft = '90px';
}
Xw[1].onmouseover = function () {
    VerticalLine[1].style.transition = 'height 0.5s';
    VerticalLine[1].style.height = '0';
    ColorRed[1].style.color = 'red';
    XiangYou[2].style.transition = 'margin-left 0.3s'
    XiangYou[2].style.marginLeft = '20px';
    XiangYou[3].style.transition = 'margin-left 0.3s'
    XiangYou[3].style.marginLeft = '90px';
}
Xw[2].onmouseover = function () {
    VerticalLine[2].style.transition = 'height 0.5s';
    VerticalLine[2].style.height = '0';
    ColorRed[2].style.color = 'red';
    XiangYou[4].style.transition = 'margin-left 0.3s'
    XiangYou[4].style.marginLeft = '20px';
    XiangYou[5].style.transition = 'margin-left 0.3s'
    XiangYou[5].style.marginLeft = '90px';
}
Xw[3].onmouseover = function () {
    VerticalLine[3].style.transition = 'height 0.5s';
    VerticalLine[3].style.height = '0';
    ColorRed[3].style.color = 'red';
    XiangYou[6].style.transition = 'margin-left 0.3s'
    XiangYou[6].style.marginLeft = '20px';
    XiangYou[7].style.transition = 'margin-left 0.3s'
    XiangYou[7].style.marginLeft = '90px';
}
// 鼠标移出
Xw[0].onmouseout = function () {
    VerticalLine[0].style.transition = 'height 0.3s';
    VerticalLine[0].style.height = '50px';
    ColorRed[0].style.color = '#898989';
    XiangYou[0].style.transition = 'margin-left 0.3s'
    XiangYou[0].style.marginLeft = '-50px';
    XiangYou[1].style.transition = 'margin-left 0.3s'
    XiangYou[1].style.marginLeft = '57px';
}
Xw[1].onmouseout = function () {
    VerticalLine[1].style.transition = 'height 0.5s';
    VerticalLine[1].style.height = '50px';
    ColorRed[1].style.color = '#898989';
    XiangYou[2].style.transition = 'margin-left 0.3s'
    XiangYou[2].style.marginLeft = '-50px';
    XiangYou[3].style.transition = 'margin-left 0.3s'
    XiangYou[3].style.marginLeft = '57px';
}
Xw[2].onmouseout = function () {
    VerticalLine[2].style.transition = 'height 0.5s';
    VerticalLine[2].style.height = '50px';
    ColorRed[2].style.color = '#898989';
    XiangYou[4].style.transition = 'margin-left 0.3s'
    XiangYou[4].style.marginLeft = '-50px';
    XiangYou[5].style.transition = 'margin-left 0.3s'
    XiangYou[5].style.marginLeft = '57px';
}
Xw[3].onmouseout = function () {
    VerticalLine[3].style.transition = 'height 0.5s';
    VerticalLine[3].style.height = '50px';
    ColorRed[3].style.color = '#898989';
    XiangYou[6].style.transition = 'margin-left 0.3s'
    XiangYou[6].style.marginLeft = '-50px';
    XiangYou[7].style.transition = 'margin-left 0.3s'
    XiangYou[7].style.marginLeft = '57px';
}
// 顶部轮播图
var NanLbtExternal = document.getElementById('navigation-background');
var NanLbtContainer = document.getElementById('NanLbt-container');
var DirectionLeft = document.getElementById('direction_left');
var DirectionRight = document.getElementById('direction_right');
var NanLbtImg = document.getElementsByClassName('NanLbt-img');
var ImgNumber = NanLbtImg.length * 100;
window.onload = function(){
    NanLbtContainer.style.width = ImgNumber + '%';
    for(var i = 0; i<NanLbtImg.length; i++){
        NanLbtImg[i].style.width = 10000/ImgNumber + '%';
    }
}
// 鼠标移入
NanLbtExternal.onmouseenter = function () {
    DirectionLeft.style.transition = 'left 0.5s';
    DirectionLeft.style.left = '30px';
    DirectionRight.style.transition = 'right 0.5s';
    DirectionRight.style.right = '30px';
    // 清除定时器
    clearInterval(timer1);
}
// 鼠标移出
NanLbtExternal.onmouseleave = function () {
    DirectionLeft.style.transition = 'left 0.5s';
    DirectionLeft.style.left = '-60px';
    DirectionRight.style.transition = 'right 0.5s';
    DirectionRight.style.right = '-60px';
    //开启定时器
    topPlay();
}
// 节流
var sj = 500;
var dqsj = Date.now() - sj;
// 左侧按钮
DirectionLeft.onclick = function () {
    if (Date.now() - dqsj >= sj) {
        upper_pic();
        dqsj = Date.now();
    }
}
// 右侧按钮
DirectionRight.onclick = function () {
    if (Date.now() - dqsj >= ms) {
        lower_pic();
        dqsj = Date.now();
    }
}
// 上一张
function upper_pic() {
    var newLeft;
    if (NanLbtContainer.style.left === '0%') {
        NanLbtContainer.style.transition = "left 0s";
        newLeft = -(ImgNumber-200);
    } else {
        NanLbtContainer.style.transition = "left 1s";
        newLeft = parseInt(NanLbtContainer.style.left) + 100;
    }
    NanLbtContainer.style.left = newLeft + '%';
}
// 下一张
function lower_pic() {
    var newLeft;
    if (NanLbtContainer.style.left === -(ImgNumber-100) + '%') {
        NanLbtContainer.style.transition = "left 0s";
        newLeft = -100;
    } else {
        NanLbtContainer.style.transition = "left 1s";
        newLeft = parseInt(NanLbtContainer.style.left) - 100;
    }
    NanLbtContainer.style.left = newLeft + '%';
}
// 自动播放
var timer1 = null; // 声明定时器，以便后面可以清除它
function topPlay() {
    timer1 = setInterval(function () {
        // 顶部轮播图下一张
        lower_pic()
    }, 3000)
}
topPlay();
// 中间轮播图
var wrap = document.querySelector('.wrap');
var next = document.querySelector('.arr_right');
var prev = document.querySelector('.arr_left');
var clientWidth = document.body.clientWidth; //当前窗口宽度
window.onload = function(){
    if(clientWidth<900){
        wrap.style.left = '-100%';
    }
}
// 给前后箭头绑定事件
// 节流
var ms = 500;
var lastClick = Date.now() - ms;
next.onclick = function () {
    if (Date.now() - lastClick >= ms) {
        next_pic();
        lastClick = Date.now();
    }
}
prev.onclick = function () {
    if (Date.now() - lastClick >= ms) {
        prev_pic();
        lastClick = Date.now();
    }
}
// 下一张
function next_pic() {
    if (clientWidth > 1200) {
        var newLeft;
        if (wrap.style.left === '-11180px') {
            wrap.style.transition = "left 0s";
            newLeft = -1260;
        } else {
            wrap.style.transition = "left 1s";
            newLeft = parseInt(wrap.style.left) - 1240;
        }
        wrap.style.left = newLeft + 'px';
    } else {
        var newLeft;
        if (wrap.style.left === '-900%') {
            wrap.style.transition = "left 0s";
            newLeft = -100;
        } else {
            wrap.style.transition = "left 1s";
            newLeft = parseInt(wrap.style.left) - 100;
        }
        wrap.style.left = newLeft + '%';
    }
}
// 上一张
function prev_pic() {
    if (clientWidth > 1200) {
        var newLeft;
        if (wrap.style.left === '-1260px') {
            wrap.style.transition = "left 0s";
            newLeft = -11180;
        } else {
            wrap.style.transition = "left 1s";
            newLeft = parseInt(wrap.style.left) + 1240;
        }
        wrap.style.left = newLeft + 'px';
    } else {
        var newLeft;
        if (wrap.style.left === '0%') {
            wrap.style.transition = "left 0s";
            newLeft = -800;
        } else {
            wrap.style.transition = "left 1s";
            newLeft = parseInt(wrap.style.left) + 100;
        }
        wrap.style.left = newLeft + '%';
    }
}
// 自动播放
var timer2 = null; // 声明定时器，以便后面可以清除它
function autoPlay() {
    timer2 = setInterval(function () {
        // 中间轮播图下一张
        next_pic();
    }, 3000)
}
autoPlay();
// 鼠标移到图片时停止自动播放按钮出现，移开鼠标继续自动播放按钮消失
var container = document.querySelector('.container');
container.onmouseenter = function () {
    // 清除定时器
    clearInterval(timer2);
    // 鼠标移入左右按钮缓慢出现
    prev.style.transition = 'left 0.6s';
    next.style.transition = 'right 0.6s';
    prev.style.left = '-110px';
    next.style.right = '-110px';
}
container.onmouseleave = function () {
    //开启定时器
    autoPlay();
    // 鼠标移出左右按钮缓慢消失
    prev.style.left = '-1200px';
    next.style.right = '-1200px';
}