js各种特效轮播图，选项卡，放大镜，窗口拖拽，楼层跳转

// 透明度轮播图
    // 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";
    }
}