Web APIS 第五天

滚动事件

　　当页面进行滚动时触发的事件

　　为什么要学？很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部

　　window . addEventListener ( 'scroll' , function(){})

加载事件

　　加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

　　window . addEventListener ( 'load' , function(){})

　　注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

案例 : 右侧导航栏

// 1. 获元取素
let items = document.querySelectorAll('.item')
// 内容的盒子获取
let neirongs = document.querySelectorAll('.neirong')
// 2. 左侧aside 模块点击谁，谁高亮
for (let i = 0; i < items.length; i++) {
items[i].addEventListener('click', function () {
// 找到上一个active 移除类
document.querySelector('.aside .active').classList.remove('active')
// 点击谁谁添加类
this.classList.add('active')
// 3. 右侧内容跟随走动让页面滚动到对应的offsetTop值位置
// console.log(neirongs[i].offsetTop) 不用给单位
document.documentElement.scrollTop = neirongs[i].offsetTop
})
}
</script>

案例 : 仿京东固定头部练习

</script>

轮播图案例

分析：

需求①：小图标鼠标经过事件

鼠标经过小图片，当前高亮，其余兄弟变淡添加类

需求② ：大图片跟随变化

对应的大图片跟着显示，如果想要过渡效果，可以使用opacity效果，可以利用CSS淡入

淡出的效果，还是添加类

需求③：右侧按钮播放效果

点击右侧按钮，可以自动播放下一张图片

需要一个变化量 index 不断自增

然后播放下一张图片

如果到了最后一张，必须要还原为第1张图片

教你一招：索引号 = 索引号 % 数组长度（放到播放前面)

需求④：解决一个BUG

点击右侧按钮可以实现播放下一张，但是鼠标经过前面的，播放就会乱序

解决方案：让变化量（索引号）重新赋值为当前鼠标经过的索引号

需求⑤：左侧按钮播放效果

点击左侧按钮，可以自动播放上一张图片

需要一个变化量 index 不断自减

然后播放上一张图片

如果到了第一张，必须要从最后一张播放

教你一招：索引号 = (数组长度 + 索引号) % 数组长度

需求⑥：

因为左侧按钮和右侧按钮里面有大量相同的操作，可以抽取封装一个函数 common

需求⑦：开启定时器

其实定时器自动播放，就相当于点击了右侧按钮，此时只需要， right.click()

需求⑧：

鼠标经过停止定时器（清除定时器）

鼠标离开开启定时器（开启定时器）

<script>
  let main = document.querySelector('.main')
  let lis = document.querySelectorAll('.indicator li')

  let pics = document.querySelectorAll('.slides ul li')

  let text = document.querySelector('.extra h3')

  let next = document.querySelector('.next')
  let prev = document.querySelector('.prev')

  // 需求一 鼠标经过小图标, 高亮
  for (let i = 0; i < lis.length; i++){
    lis[i].addEventListener('mouseenter',function () {
      // 选出唯一的那个active , 删除类
      document.querySelector('.indicator .active').classList.remove('active');
      // 鼠标经过谁 谁加上active
      this.classList.add('active');

      // 需求二 鼠标移到该位置大图片也变化
      document.querySelector('.slides ul .active').classList.remove('active');

      pics[i].classList.add('active')

      text.innerHTML = `
      第${i+1}张图的描述信息
      `
      //需求四 解决bug
      //点击右侧按钮可以实现播放 下一张, 但是鼠标经过前面的, 播放就会乱序
      //解决方案 让变化量 index 重新赋值为 当前鼠标经过的索引号
      //鼠标经过了那个小li 他的索引号就是 i
      //右侧按钮是通过index 来控制播放
      index = i;
    })
  }

  //需求三 右侧按钮点击事件
  let index = 0; //全局变量 为了给右侧按钮和左侧按钮同时使用
  next.addEventListener('click',function () {
    index++;
    //选出 index 小图片做操作
    index = index % lis.length

    common()
  })

  //需求 左侧按钮点击事件
  prev.addEventListener('click',function () {
    index--;

    // if(index < 0){
    //   index = 9
    // }
    index = (lis.length + index)%lis.length

    common()


  })

  //封装一个公共函数
  function common() {
    document.querySelector('.indicator .active').classList.remove('active');
    lis[index].classList.add('active')
    //选出 index 大图片做操作
    document.querySelector('.slides ul .active').classList.remove('active');
    pics[index].classList.add('active');
    text.innerHTML = `
      第${index+1}张图的描述信息
      `
  }


  let timer = setInterval(function () {
    //自动调用右侧按钮的点击事件
    next.click()
  },1000)

  //
  main.addEventListener('mouseenter',function () {
    clearInterval(timer)
  })

  main.addEventListener('mouseleave',function () {
    timer = setInterval(function () {
      next.click()
    },1000)
  })

</script>

posted on 2022-07-11 10:09 我要当程序源阅读(34) 评论(0) 编辑收藏举报

刷新页面返回顶部

LZYBOK

Web APIS 第五天

公告

导航