window.addEventListener('load', function () {
    var arrow_l = this.document.querySelector('.arrow_left');
    var arrow_r = this.document.querySelector('.arrow_right');
    var focus = this.document.querySelector('.focus');
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer)
        timer = null; // 清楚定时器变量
    })
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function () {
            // 手动调用事件
            arrow_r.click();
        }, 5000)
    })
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.spot');  // 获取 focus 中的 ol
    // console.log(ul.children.length);

    var num = 0; // 通过箭头控制播放图片的变量
    var circle = 0; //通过小圆圈的播放图片的变量

    var focusWidth = focus.offsetWidth;
    for (var i = 0; i < ul.children.length; i++) {
        // 创建 li
        var li = this.document.createElement('li');

        li.setAttribute('index', i) // 记录当前 小圆圈的索引号

        // 插入 ul
        ol.appendChild(li);

        // 创建 li 的同时给 该li 绑定事件，点到此li，此li变色，其他所有li褪色(排他思想)
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current'
            // 点击 小圆圈，移动图片
            // ul 移动的距离就是小圆圈的索引号 乘以图片的宽度，注意是 负值，往左走
            var index = this.getAttribute('index') // 获取当前小 li 的索引号

            // 同步思想
            circle = num = index; // 当点击了某个li，就把小li的索引号给num和circle，这样可以解决不管是通过箭头还是小圆圈播放图片，都不会错序

            animate(ul, -index * focusWidth);

        })
    }
    // ol 第一个 li 类名设置为 current
    ol.children[0].className = 'current';

    // 克隆第一张图片，放在ul的最后面
    var first = ul.children[0].cloneNode(true)  // 深拷贝
    ul.appendChild(first);

    // 左右侧点击事件
    var flag = true; // 节流阀
    arrow_r.addEventListener('click', function () {
        if (flag) {
            // flag = false;  //停用节流阀功能
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -focusWidth * num, function () {
                flag = true; // 此次移动结束后放开节流阀
            });

            circle++;
            // 如果走到最后克隆的图片，则重置 circle的值即可
            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
        }
    })

    arrow_l.addEventListener('click', function () {
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focusWidth + 'px';
        }
        num--;
        animate(ul, -focusWidth * num);

        circle--;
        // 当 circle小于0时，讲circle值设置为最后一个
        if (circle < 0) {
            circle = ol.children.length - 1;
        }
        circleChange();
    })
    function circleChange() {
        // 排他思想,清除所有的ol 下 li的current
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current'; // 只保留当前的小 li 为current状态
    }

    var timer = setInterval(function () {
        // 手动调用事件
        arrow_r.click();
    }, 5000)


    var rettop = this.document.querySelector('.returntop');  // 侧边栏返回顶部模块
    var recomment = this.document.querySelector('.recommend')  // 推荐模块
    //页面滚动事件
    this.document.addEventListener('scroll', function () {
        // console.log(window.pageYOffset); // 页面被卷曲的头部
        // console.log(recomment.offsetTop);
        if (window.pageYOffset >= recomment.offsetTop) {
            rettop.style.display = 'block';
        } else {
            rettop.style.display = 'none';
        }
    })

    // 返回顶部事件
    rettop.addEventListener('click', function () {
        // window.scroll(0, 0);  // 瞬间返回
        animateY(window, 0)
    })


    // 楼梯跳转
    var guesslike = this.document.querySelector('.guesslike');
    console.log(guesslike.offsetTop);
})