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