滚动事件和加载事件
滚动事件
-
l当页面进行滚动时触发的事件
-
为什么要学？
- 很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
-
事件名：scroll
-
监听整个页面滚动：
//页面滚动事件 window.addEventListener('scroll', function (){ //执行操作 }) //给window或document添加scroll事件 -
监听某个元素的内部滚动直接给某个元素加即可
加载事件
-
为什么要学？
- 有些时候需要等页面资源全部处理完了做一些事情
- 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
-
事件名:load
-
监听页面所有资源加载完毕:
- 给window添加load事件
//页面加载事件
window.addEventListener('load', function (){
//执行操作
})
- 注意：不光可以监听整个页面资源加载完毕，也可以真对某个资源绑定load事件
元素大小
scroll家族
获取宽高
- 获取元素的内容总宽高(不包含滚动条) 返回值不带单位
- scrollWidth 和 scrollHeight
获取位置
- 获取元素内容往左、往上滚出去看不到的距离
- scrollLeft和scrollTop
- 这两个属性是可以修改的
div.addEventListener('scroll', function (){ conslole.log(this.scrollTop) })
offset 家族
获取宽高:
- 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
- offsetWidth 和 offsetHeight
获取位置:
- 获取元素距离自己定位父级元素的左上距离
- offsetLeft 和 offsetTop 注意是只读属性
注意：如果父容器有定位，就参照父容器的定位，如果没有就接着往上找
client 家族
获取宽高
- 获取元素的可见部分宽高（不包含边框，滚动条）
- clientWidth 和 clientHeight
获取位置
- 获取左边款和上边框宽度
- clientLeft和 clientTop 注意是只读属性
会在窗口尺寸改变的时候触发的时间:
- resize
window.addEventListener('resize', function (){ //执行操作 })
- 检查屏幕宽度:
window.addEventListener('resize', function (){ let w = document.documentElement.clientWidth console.log(w) })
轮播图案例分析
分析：
需求①：小图标鼠标经过事件
鼠标经过小图片，当前高亮，其余兄弟变淡 添加类
需求② ：大图片跟随变化
对应的大图片跟着显示，如果想要过渡效果，可以使用opacity效果，可以利用CSS淡入 淡出的效果，还是添加类
需求③：右侧按钮播放效果
点击右侧按钮，可以自动播放下一张图片
需要一个变化量 index 不断自增
然后播放下一张图片
如果到了最后一张，必须要还原为第1张图片
教你一招： 索引号 = 索引号 % 数组长度 （放到播放前面）
需求④：解决一个BUG
点击右侧按钮可以实现播放下一张，但是鼠标经过前面的，播放就会乱序
解决方案： 让变化量（索引号） 重新赋值为 当前鼠标经过的索引号
需求⑤：左侧按钮播放效果
点击左侧按钮，可以自动播放上一张图片
需要一个变化量 index 不断自减
然后播放上一张图片
如果到了第一张，必须要从最后一张播放
教你一招： 索引号 = (数组长度 + 索引号) % 数组长度
需求⑥：
因为左侧按钮和右侧按钮里面有大量相同的操作，可以抽取封装一个函数 common
需求⑦：开启定时器
其实定时器自动播放，就相当于点击了右侧按钮，此时只需要， right.click()
需求⑧：
鼠标经过停止定时器 （清除定时器）
鼠标离开开启定时器 （开启定时器）
轮播图实现步骤
单击缩略图进行图片切换
获取必要的元素： 缩略图 大图 图片信息
为缩略图添加单击事件
1.切换缩略图的样式 -- 排他思想
2.切换对应的大图的样式 -- 排他思想
3.设置图片信息
// 获取元素
// 缩略图
let indicators = document.querySelectorAll('.indicator li')
// 大图
let slides = document.querySelectorAll('.slides li')
// 图片信息
let info = document.querySelector('.extra > h3')
// 1.单击缩略图进行图片切换
indicators.forEach(function(ele, index) {
// 为所有缩略图绑定单击事件(事件类型你随意)
ele.addEventListener('click', function() {
// 1.1.切换缩略图的样式 -- 排他思想
document.querySelector('.indicator li.active').classList.remove('active')
// this.classList.add('active')
ele.classList.add('active')
// 1.2.切换对应的大图的样式 -- 排他思想
document.querySelector('.slides li.active').classList.remove('active')
slides[index].classList.add('active')
// 1.3.设置图片信息
info.innerText = `第${index + 1}张图的描述信息`
// 1.4 为了能够让上下张和缩略图单击切换时的索引一致，我们需要在单击之后将上下张和下一张所使用的索引进行重置
imgIndex = index
})
})
下一张
主要是需要一个变量来记录当前是第几张
功能
1.缩略图样式切换
2.大图样式要切换
3.图片信息要改变
// 2.下一张
next.addEventListener('click', function() {
// 让图片索引+1
imgIndex++
// 如果索引越界，就应该回到和第0张，实现循环轮播
if (imgIndex > indicators.length - 1) {
imgIndex = 0
}
// 1.缩略图样式切换
// 2.大图样式要切换
// 3.图片信息要改变
indicators[imgIndex].click()
})
上一张
// 3.上一张
prev.addEventListener('click', function() {
// 让图片索引-1
imgIndex--
if (imgIndex < 0) {
imgIndex = indicators.length - 1
}
indicators[imgIndex].click()
})
自动轮播
//定义定时器
let timeId
//5.添加定时器
function getTime() {
//开启定时器之前都应该先清除定时器
clearInterval(timeId)
timeId = setInterval(function () {
next.click()
},1000)
}
getTime()
//6.鼠标经过时 清除定时器
let main = this.document.querySelector('.main')
main.addEventListener('mouseover', function () {
clearInterval(timeId)
})
main.addEventListener('mouseout', function () {
//开启定时器之前都应该先清除定时器
clearInterval(timeId)
getTime()
})
\
