javascript动态效果代码 js动态效果

目录

• 实现效果
• 技术点
• 导航文字高亮实现
• 左侧菜单栏实现
• 倒计时实现
• 轮播图实现

• 点击小圆点，高亮，图片跟随切换
• 图自动播放
• 小圆点冲突问题
• 鼠标经过与离开效果实现

实现效果

前提：都必须用js来实现

1. 鼠标经过，文本变成蓝色。
2. banner区域：鼠标移入旁边有详细板块展示出来。
3. 轮播图实现自动轮播效果；点击小圆点可以切换；鼠标经过轮播图时，停止播放；鼠标移开继续；
4. 右侧倒计时效果。

技术点

导航文字高亮实现

循环遍历每个小li，绑定事件鼠标经过，添加类名active；（记得貌似有互斥的逻辑 排他思想）
排他思想：干掉所有人，复活自己。

// 导航文字高亮
const lis = document.querySelectorAll('.header .header_nav li')
// console.log(lis)
for(let i = 0; i < lis.length; i++){
    lis[i].addEventListener('mouseenter', function() {
        // console.log(11)
        for(let j = 0; j < lis.length; j++){
            // nav_ul.querySelector('.active').classList.remove('.active')
            // 大错误  类名直接active
            lis[j].classList.remove('active')
        }
        this.classList.add('active')
    })
}

此处大错误，逻辑没有问题，浏览器调试时发现鼠标经过确实有加上类名，但是页面没有变化仔细一看，发现写多了一个点。

左侧菜单栏实现

分析：每个小li里面包含一个ul，这个ul就是显示或隐藏；这里不需要用js控制底色经过变色。主要工作控制ul显示或隐藏

1. 获取小li；获取ul
2. 循环遍历每个小li里的a，绑定鼠标移入事件，元素显示
3. 鼠标移开，元素隐藏

用display显示不起效果，display属性都有添加，但是不行。visibility属性也同样不行。

首先要弄清楚只用样式时ul为什么会隐藏起来，用了什么属性？

看了答案才知道，原来是控制了一整个ul盒子的高度，鼠标经过时高度设置为300px就可以了(没有仔细看）

但是只会出现第一个ul的内容，检查发现获取ul时只获取了第一个ul，而不是全部

// 左侧菜单栏
const leftAs = document.querySelectorAll('.banner .nav .all-class .show>li>a')
// console.log(leftLis)
for(let i = 0; i< leftAs.length; i++){
    leftAs[i].addEventListener('mouseenter', function() {
        for(let j = 0; j < leftAs.length; j++){
            document.querySelectorAll('.banner .nav .all-class .men-hiden')[j].style.height = '0px'
        }
        // 其实这里应该可以用leftAs[i]的兄弟节点
        document.querySelectorAll('.banner .nav .all-class .men-hiden')[i].style.height = '300px'
    })
    leftAs[i].addEventListener('mouseleave', function() {
        for(let j = 0; j < leftAs.length; j++){
            document.querySelectorAll('.banner .nav .all-class .men-hiden')[j].style.height = '0px'
        }
    })
}

代码比较冗余，先这样。

倒计时实现

关键词：时间戳 计算天数 小时 分钟 秒数 换算
未来时间戳 - 当前时间戳 = 毫秒数 （转为秒 除1000）
秒=》天 / 60 / 60 / 24

// 要定时器每隔1s重新获取计算
let d = document.querySelector('#_d')
let h = document.querySelector('#_h')
let m = document.querySelector('#_m')
let s = document.querySelector('#_s')

function setTime() {
    let time = ((+new Date('2023-04-10 15:00:00')) - (+new Date())) / 1000

    // 个位数的要补0
    let day = parseInt(time / 60 / 60 / 24)
    day = day < 10 ? '0' + day : day

    let hour = parseInt(time / 60 / 60 % 24)
    hour = hour < 10 ? '0' + hour : hour

    let min = parseInt(time / 60 % 60)
    min = min < 10 ? '0' + min : min

    let sec = parseInt(time % 60)
    sec = sec < 10 ? '0' + sec : sec

    d.innerHTML = day
    h.innerHTML = hour
    m.innerHTML = min
    s.innerHTML = sec
}
setTime()
setInterval(setTime, 1000)

轮播图实现

小圆点b_dot，每一张图就是li，都是添加或移除on类；小圆点和大图片要对应起来。
实现的点：1. 点击小圆点，图片切换； 2. 图轮播且小圆点对应切换； 3. 鼠标停留停止播放。

点击小圆点，高亮，图片跟随切换

// 获取小圆点
const dot = document.querySelectorAll('.banner .banner_img .b_dot a')
const imgs = document.querySelectorAll('#publish-copy li')

for(let i = 0; i < dot.length; i++){
    dot[i].addEventListener('click', function() {
        for(let j = 0; j < dot.length; j++){
            dot[j].classList.remove('on')
            // 把小圆点和图片顺序绑定在一起
            imgs[j].classList.remove('on')
            imgs[j].style.display = 'none'
        }
        this.classList.add('on')
        imgs[i].classList.add('on')
        imgs[i].style.display = 'block'
    })
}

图自动播放

① 首先自动播放下一张
② 到了第四张的时候（index === 4）需要重置index
③ 小圆点对应一致

// 播放
let index = 0 //index全局变量 信号量
function play() {

    imgs[index].classList.remove('on')
    imgs[index].style.display = 'none'
    dot[index].classList.remove('on')

    index++
    if(index === 4) index = 0
    imgs[index].classList.add('on')
    imgs[index].style.display = 'block'
    dot[index].classList.add('on')
}

// play()

let timer = setInterval(play, 1000)

小圆点冲突问题

当轮播图正在自动播放时，点击小圆点会切换图片，但会有两个小圆点同时高亮，并且图片的播放顺序错乱。
解决：小圆点的点击事件里让index = 当前小圆点的索引号i

鼠标经过与离开效果实现

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

// 鼠标经过和离开
box.addEventListener('mouseenter', function() {
    clearInterval(timer)
})
box.addEventListener('mouseleave', function() {
    timer = setInterval(play, 1000)
})