// 透明度轮播图

    // img:轮播图片

    // dot:轮播点

    // lbtn:左箭头

    // rbtn:右箭头

    // banner:轮播盒子

    // active:轮播点选中效果类名

    // time:自动轮播时间

function Banner_opacity(img, dot, lbtn, rbtn, banner, active = "active", time = 2000) {

    // 获取元素

    let imgs = document.querySelectorAll(img);

    let dots = document.querySelectorAll(dot);

    let leftbtn = document.querySelector(lbtn);

    let rightbtn = document.querySelector(rbtn);

    let ban = document.querySelector(banner);

    // 定义下标

    let num = 0;

    // 定义开关

    let flag = true;

    // 设置图片默认显示第一张

    imgs[0].style.opacity = 1;

    // 设置轮播点默认显示第一个

    dots[0].classList.add(active);

    // 自动轮播

    let t = setInterval(move, time);

    function move() {

        num = num === imgs.length - 1 ? 0 : ++num;

        imgs.forEach((val, index) => {

            val.style.opacity = 0;

            dots[index].classList.remove(active);

        });

        imgs[num].style.opacity = 1;

        dots[num].classList.add(active);

    }

    // 点击轮播点，会出现对应的图片

    dots.forEach((val, index) => {

        val.onclick = () => {

            num = index - 1;

            move();

        };

    });

    // 点击左箭头，出现上一张

    leftbtn.onclick = () => {

        if (!flag) {

            return;

        }

        flag = false;

        imgs[num].style.opacity = 0;

        dots[num].classList.remove(active);

        num = num === 0 ? imgs.length - 1 : --num;

        dots[num].classList.add(active);

        imgs[num].style.opacity = 1;

        setTimeout(() => {

            flag = true;

        }, 1000);

    };

    // 点击右箭头，出现下一张

    rightbtn.onclick = () => {

        if (!flag) {

            return;

        }

        flag = false;

        move();

        setTimeout(() => {

            flag = true;

        }, 1000);

    };

    //鼠标移入停止轮播

    ban.onmouseover = () => {

        clearInterval(t);

    };

    //鼠标移出继续轮播

    ban.onmouseout = () => {

        t = setInterval(move, time);

    };

    // 页面失去焦点时停止轮播

    onblur = () => {

        clearInterval(t);

    };

    // 页面获得焦点时继续轮播

    onfocus = () => {

        t = setInterval(move, time);

    };

}

// 双下标轮播图(左右平移）

    // img:轮播图片

    // dot:轮播点

    // leftbtn:左箭头

    // rightbtn:右箭头

    // ban:轮播盒子

    // active:轮播点选中效果类名

    // time:自动轮播时间

function Banner_transform(img, dot, leftbtn, rightbtn, ban, active = "active", time = 2000) {

    // 获取元素

    let imgs = document.querySelectorAll(img);

    let dots = document.querySelectorAll(dot);

    let lbtn = document.querySelector(leftbtn);

    let rbtn = document.querySelector(rightbtn);

    let banner = document.querySelector(ban);

    // 获取轮播图的宽度

    let widths = parseInt(getComputedStyle(banner).width);

    // 定义双下标,now:当前页面下标,next:下一张页面下标

    let now = 0;

    let next = 0;

    // 定义开关

    let flag = true;

    // 设置图片默认显示第一张

    imgs.forEach(val => {

        val.style.left = widths + "px";

    });

    imgs[0].style.left = 0;

    // 设置轮播点默认显示第一个

    dots[0].classList.add(active);

    // 自动轮播

    let t = setInterval(move, time);

    function move() {

        next = next === imgs.length - 1 ? 0 : ++next;

        imgs[now].style.left = 0;

        imgs[next].style.left = widths + "px";

        animate(imgs[now], {left: -widths});

        animate(imgs[next], {left: 0}, () => {

            dots.forEach(val => {

                val.classList.remove(active);

            });

            dots[next].classList.add(active);

        });

        now = next;

    }

    // 点击轮播点，会出现对应的图片

    dots.forEach((val, index) => {

        val.onclick = () => {

            dots.forEach((val, index) => {

                imgs[index].style.left = widths + "px";

                val.classList.remove(active);

            });

            imgs[index].style.left = 0;

            val.classList.add(active);

            now = next = index;

        };

    });

    // 点击左箭头，出现上一张

    lbtn.onclick = () => {

        if (!flag) {

            return;

        }

        flag = false;

        next = next === 0 ? imgs.length - 1 : --next;

        imgs[now].style.left = 0;

        imgs[next].style.left = -widths + "px";

        animate(imgs[now], {left: widths});

        animate(imgs[next], {left: 0}, () => {

            dots.forEach(val => {

                val.classList.remove(active);

            });

            dots[next].classList.add(active);

            flag = true;

        });

        now = next;

    };

    // 点击右箭头，出现下一张

    rbtn.onclick = () => {

        if (!flag) {

            return;

        }

        flag = false;

        next = next === imgs.length - 1 ? 0 : ++next;

        imgs[now].style.left = 0;

        imgs[next].style.left = widths + "px";

        animate(imgs[now], {left: -widths});

        animate(imgs[next], {left: 0}, () => {

            dots.forEach(val => {

                val.classList.remove(active);

            });

            dots[next].classList.add(active);

            flag = true;

        });

        now = next;

    };

    // 鼠标移入时停止轮播

    banner.onmouseover = () => {

        clearInterval(t);

    };

    // 鼠标移出时继续轮播

    banner.onmouseout = () => {

        t = setInterval(move, time);

    };

    // 窗口失去焦点时停止轮播

    onblur = () => {

        clearInterval(t);

    };

    // 窗口获得焦点时继续轮播

    onfocus = () => {

        t = setInterval(move, time);

    };

}

// 选项卡

    // select1:鼠标移入的元素

    // select2:要显示的选项卡

function Tab_card(select1, select2) {

    let li = document.querySelectorAll(select1);

    let box = document.querySelectorAll(select2);

    // 鼠标移入select1，显示select2

    li.forEach((val, index) => {

        val.onmouseover = () => {

            box[index].style.display = "block";

        };

        val.onmouseout = () => {

            box[index].style.display = "none";

        };

    });

}

// 左右滑动列表

    // leftbtn:左箭头

    // rightbtn:右箭头

    // con:列表元素

    // page:页数

function List_slide(leftbtn, rightbtn, con, page = 3) {

    // 获取元素

    let lbtn = document.querySelector(leftbtn);

    let rbtn = document.querySelector(rightbtn);

    let cons = document.querySelector(con);

    // 计算一页宽度

    let widths = parseInt(getComputedStyle(cons, null).width) / page;

    // 定义下标

    let num = 0;

    // 定义箭头的默认样式

    lbtn.style.color = "#ccc";

    lbtn.style.cursor = "not-allowed";

    // 点击右箭头，向后翻页

    rbtn.onclick = () => {

        lbtn.style.color = "#666";

        lbtn.style.cursor = "pointer";

        num++;

        if (num >= page - 1) {

            num = page - 1;

            rbtn.style.color = "#ccc";

            rbtn.style.cursor = "not-allowed";

        }

        cons.style.transform = "translateX(-" + num * widths + "px)";

    };

    // 点击左箭头，向前翻页

    lbtn.onclick = () => {

        rbtn.style.color = "#666";

        rbtn.style.cursor = "pointer";

        num--;

        if (num <= 0) {

            num = 0;

            lbtn.style.color = "#ccc";

            lbtn.style.cursor = "not-allowed";

        }

        cons.style.transform = "translateX(-" + num * widths + "px)";

    };

}

// 遮盖

    // select1:鼠标移入的元素

    // select2:移入显示的遮盖元素

function Cover(select1, select2) {

    // 获取元素

    let box = document.querySelector(select1);

    let cover = document.querySelector(select2);

    // 鼠标移入，显示遮盖

    box.onmouseover = () => {

        cover.style.opacity = 1;

    };

    // 鼠标移出，隐藏遮盖

    box.onmouseout = () => {

        cover.style.opacity = 0;

    };

}

//楼层跳转

//跳转到目的地的位置都用相同类名的盒子包裹起来

//点击li  跳转到相应的位置

//置顶直接滚动到页面最顶端

function tiaozhuan(btnbox,section, btn, back) {

    let btnboxs=document.querySelector(btnbox);

    let sec = document.querySelectorAll(section);

    let btns = document.querySelectorAll(btn);

    let backs = document.querySelector(back);

    window.onscroll = function () {//滚动条事件

        let windowTop = document.documentElement.scrollTop;//获取现在滚动条到顶端的距离

            if (windowTop >= window.innerHeight / 2) {

                btnboxs.style.opacity = 1;

            }

            else {

                btnboxs.style.opacity = 0;

            }

        }

    btns.forEach((val, index) => {

        val.onclick = () => {

            animate(document.documentElement, {scrollTop: sec[index].offsetTop});

        };

    });

    backs.onclick = () => { //返回顶部

        animate(document.documentElement, {scrollTop: 0});

    };

}

//窗口拖动

//第一种

//   不全面   边界问题没有实现

let box1=document.querySelector(".box");

    box1.onmousedown=function(event){

        let x0=event.offsetX;

        let y0=event.offsetY;

        box1.onmousemove=function(event){

            let x1=event.clientX;

            let y1=event.clientY;

            box1.style.left=x1-x0+"px";

            box1.style.top=y1-y0+"px";

        }

        box1.onmouseup=function(){

            box1.onmousemove=""

            box1.onmouseup=""

        }

    }

    //第二种   实现全部功能  任意拖动  速度和边界都ok

    function move(box) {  //封装函数

        let oldx;  //声明

        let oldy;

        let newx;

        let newy;

        let mx;

        let my;

        let boxx = document.querySelector(box);//获取

        let maxx = window.innerWidth - boxx.offsetWidth;//窗口宽度减去盒子现在离窗口左边的宽度

        console.log(maxx)

        let maxy = window.innerHeight - boxx.offsetHeight;//窗口高度减去盒子现在离窗口顶部的距离

        boxx.onmousedown = function (e) {  //按下事件函数

            oldx = e.clientX;//移动前鼠标距离窗口左边的距离

            oldy = e.clientY;//移动前鼠标距离窗口顶部的距离

            boxt = boxx.offsetTop;//移动后盒子距离窗口顶部的距离

            boxl = boxx.offsetLeft;//移动后盒子距离窗口左边的距离

            window.addEventListener("mousemove", move, false);//给窗口添加一个鼠标移动事件

            boxx.addEventListener("mouseup", up, false);//给盒子添加一个鼠标离开事件

        }

        function move(e) {//

            newx = e.clientX;//移动后鼠标离窗口左边的距离

            newy = e.clientY;//移动后鼠标离窗口顶部的距离

            mx = newx - oldx + boxl;//移动前后鼠标到窗口左边距离的差再加上盒子到窗口左边的距离

            my = newy - oldy + boxt;//移动前后鼠标到窗口顶部距离的差再加上盒子到窗口顶部的距离

            if (mx > maxx) {   //判断盒子到窗口最右边的时候

                mx = maxx;

            }

            if (my > maxy) {//判断盒子到窗口最下面的时候

                my = maxy;

            }

            if (mx < 0) {//判断盒子到窗口最左边的时候

                mx = 0;

            }

            if (my < 0) {//判断盒子到窗口最上面的时候

                my = 0;

            }

            boxx.style.left = mx + "px";//添加字符串单位

            boxx.style.top = my + "px";

        }

        function up() {

            window.removeEventListener("mousemove", move, false);//移除窗口移动函数

            boxx.removeEventListener("mouseup", up, false);//移除鼠标离开事件

        };

    }

    move(".box");//函数自调用

//放大镜效果

function boost(leftbox,leftboxcover,hands,bigimg){

    let box=document.querySelector(leftbox);  //左边的盒子

    let box1=document.querySelector(leftboxcover);//在左边盒子上面的遮罩

    let hand=document.querySelector(hands);//抓手区域

    let bigbox=document.querySelector(bigimg);//右边放大的图片

    box.onmouseenter=function(){   //鼠标移入抓手（蓝色）和右边图片显示

    hand.style.display="block";

    bigbox.style.display="block";

    box1.onmousemove=function(event){//事件移动

    let x0=hand.offsetWidth/2;   //鼠标距离抓手hand的边框距离中心

    let y0=hand.offsetHeight/2;

    let x1=event.clientX;   //鼠标距离页面左边的距离

    let y1=event.clientY;//鼠标距离页面上面的距离

    let left=x1-x0;   //抓手盒子距离页面左边的距离

    let top=y1-y0;//抓手盒子距离页面右边的距离

        if(left<0){   //判断条件  使抓手盒子不离开放图片的盒子

            left=0;

        }

        if(top<0){

            top=0;

        }

        if(top>200){

            top=200;

        }

        if(left>200){

            left=200

        }

        hand.style.left=left+"px";   //抓手盒子随鼠标移动的位置

        hand.style.top=top+"px";

        bigbox.style.left=-left*3+"px";   //右边图片放大三倍随鼠标移动实时变化

        bigbox.style.top=-top*3+"px";

    }

    }

    box.onmouseleave=function(){   //鼠标离开左边放图片的盒子  抓手和右边放大图片都消失

        hand.style.display="none";

        bigbox.style.display="none";

    }

}