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";
    }
}