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";
}
}
js各种特效轮播图,选项卡,放大镜,窗口拖拽,楼层跳转的更多相关文章
- 用 JS 写 (轮播图 / 选项卡 / 滑动门)
页面中经常会用到各式各样的轮播图,今天贺贺为大家介绍一种常用的方法,对于JS我们需要举一反三,一种方法可以对多个轮播样式进行渲染. <head> <meta charset=&quo ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js原生实现轮播图效果(面向对象编程)
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- 关于js特效轮播图练习
[出现问题] js轮播图,图片未正常轮播. [解决方法] 通过对代码的检查,发现是以下三个原因造成的错误. 1.js代码问题 js代码使用alert(test);,测试修改完毕后,发现依然没有解决错误 ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- photoSlider-原生js移动开发轮播图、相册滑动插件
详细内容请点击 在线预览 立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...
- JS学习笔记--轮播图效果
希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...
随机推荐
- 苹果cms安装及配置详细教程
听说这个好!php+mysql的 下载 http://www.maccms.com/down.html 下载之后解压到你的网站跟目录中,就像这个样子的 后台目录 然后重要的一步来了,在ftp工具上 ...
- eclipse打包jar包
项目右键 选择Export 选择java文件夹 选择 JAR file选择包,类,选择导出路径然后 Finish
- DAX/PowerBI系列 - 累计总计(Cumulative Total)
DAX/PowerBI系列 - 累计总计(Cumulative Total) 2017/07/23 更新:B列公式(见最后) 难度: ★★☆☆☆(2星) 适用: ★★☆☆☆(2星) 概况: 这个模式普 ...
- Deeplab v3+的结构的理解,图像分割最新成果
Deeplab v3+ 结构的精髓: 1.继续使用ASPP结构, SPP 利用对多种比例(rates)和多种有效感受野的不同分辨率特征处理,来挖掘多尺度的上下文内容信息. 解编码结构逐步重构空间信息来 ...
- linux----------linux的scp命令介绍
1.scp是有Security的文件copy,基于ssh登录. 命令基本格式: scp [OPTIONS] file_source file_target OPTIONS: -v 和大多数 linux ...
- 【Spark-SQL学习之一】 SparkSQL
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...
- python selenium基于显示等待封装的一些常用方法
import os import time from PIL import Image from selenium import webdriver from appium import webdri ...
- spring注解value的用法
spring@value注解可以获取配置的*.properties中的值 具体见
- ACM总结——2017ACM-ICPC北京赛区现场赛总结
现在距离比赛结束已经过了一个多星期了,也是终于有时间写下心得了.回来就是被压着做项目,也是够够的. 这次比赛一样是我和两个学弟(虽然是学弟,但我的实力才是最弱的T_T)一起参加的,成绩的话打铁,算是情 ...
- Java 实现追加excle文件内容
Java 实现追加excle文件内容 一.示例一:excle(.xlsx) //jar import java.io.BufferedReader; import java.io.File; impo ...