Wingstudio工作室前端第二轮考核——哔哩哔哩静态首页仿写

遇到的问题：

1.轮播图（前后箭头按钮点击可变换、鼠标移入盒子停止效果） 样式代码已省略

  // 1. 初始数据
    const data = [
      { url: './uploads/carousel1.avif', title: '这次一定!', color: 'rgb(109, 68, 51)' },
      { url: './uploads/carousel2.avif', title: '正在直播KPL:成都AG vs广州TTG', color: 'rgb(43,35, 26)' },
      { url: './uploads/carousel3.avif', title: '坏坏的让我疯狂的可爱女人', color: 'rgb(155, 98, 54)' },
      { url: './uploads/carousel4.avif', title: '不要小看墨家第23代传人!', color: 'rgb(86, 92, 117)' },
      { url: './uploads/carousel5.avif', title: '影史经典之作,色彩与情感的激烈碰撞!', color: 'rgb(114, 104, 110)' },
      { url: './uploads/carousel6.avif', title: '我和12个国家的陌生人共同完成了一副画...', color: 'rgb(154, 144, 134)' },
      { url: './uploads/carousel7.avif', title: '解锁我的原神风格形象', color: 'rgb(118, 146, 127)' },
      { url: './uploads/carousel8.avif', title: '就得四川话才得劲!', color: 'rgb(55, 38, 36)' },
    ]
     
    const img = document.querySelector('.Win_slider-wrapper img')
    const p = document.querySelector('.Win_slider-footer p')
    const footer = document.querySelector('.Win_slider-footer')
    // 获取右侧按钮 
    const next = document.querySelector('.Win_next')
    let i = 0  // 信号量 控制播放图片张数
    // 注册点击事件

    next.addEventListener('click', function () {
      i++
      i = i >= data.length ? 0 : i
      // 1.3 得到对应的对象
      // 调用函数
      toggle()
    })
    //  获取左侧按钮 
    const prev = document.querySelector('.Win_prev')
    // 注册点击事件
    prev.addEventListener('click', function () {
      i--
      // 判断条件  如果小于0  则爬到最后一张图片索引号是 7
      // if (i < 0) {
      //   i = 7
      // }
      i = i < 0 ? data.length - 1 : i
      // 得到对应的对象
      // 调用函数
      toggle()
    })

    // 声明一个渲染的函数作为复用
    function toggle() {
      // 渲染对应的数据
      img.src = data[i].url
      p.innerHTML = data[i].title
      footer.style.backgroundColor = data[i].color
      // 更换小圆点    先移除原来的类名， 当前li再添加 这个 类名
      document.querySelector('.Win_slider-indicator .Win_active').classList.remove('Win_active')
      document.querySelector(`.Win_slider-indicator li:nth-child(${i + 1})`).classList.add('Win_active')
    }



    // 3. 自动播放模块
    let timerId = setInterval(function () {
      // 利用js自动调用点击事件  click()  一定加小括号调用函数
      next.click()
    }, 1000)


    // 4. 鼠标经过大盒子，停止定时器
    const slider = document.querySelector('.Win_slider')
    // 注册事件
    slider.addEventListener('mouseenter', function () {
      // 停止定时器
      clearInterval(timerId)
    })

    // 5. 鼠标离开大盒子，开启定时器
    // 注册事件
    slider.addEventListener('mouseleave', function () {
      // 停止定时器
      if (timerId) clearInterval(timerId)
      // 开启定时器
      timerId = setInterval(function () {
        // 利用js自动调用点击事件  click()  一定加小括号调用函数
        next.click()
      }, 1000)
    })

2.鼠标事件（图层问题以及动态渐变不能用display）

 document.querySelector('.Win_link1').onmouseover = function(){
      document.querySelector('.Win_content1').style.visibility='visible'
      document.querySelector('.Win_content1').style.opacity = 1
    }
    document.querySelector('.Win_link1').onmouseout = function(){
      document.querySelector('.Win_content1').style.visibility = 'collapse'
      document.querySelector('.Win_content1').style.opacity = 0
    }

 3.导航栏置顶不动（且样式改变）

 将新导航栏的盒子样式写好后设置display：none，监听滚动页面后display：block，且position不动。

 const miniHeader = document.querySelector('.Win_choose_header_down')
    window.addEventListener('scroll',function(){
      //监听页面滚动执行的操作
      const n = document.documentElement.scrollTop
      if (n>=270){
        miniHeader.style.visibility='visible'
        miniHeader.style.opacity=1
        miniHeader.style.top="64px"
        miniHeader.style.position="fixed"
      } else{
        miniHeader.style.visibility='collapse'
        miniHeader.style.opacity=0
      }

    })

4.鼠标移动到置顶导航栏高度变化

 document.querySelector('.Win_choose_header_down').onmouseover = function(){
      document.querySelector('.Win_choose_header_down').style.maxHeight="150px"
    }
    document.querySelector('.Win_choose_header_down').onmouseout = function(){
      document.querySelector('.Win_choose_header_down').style.maxHeight = "56px"
    }

 5.点击回到顶部按钮回到顶部

 document.querySelector('.Win_top_btn').onclick = function () {
    	//加一个定时器
        var timer = setInterval(function () {
        	//判断
            if (document.documentElement.scrollTop > 0) {
                document.documentElement.scrollTop -= 100;
            } else {
                clearInterval(timer);
            }

        }, 10)
    }

最后总效果：

哔哩哔哩静态首页仿写