javascript css css3 JS:轮播图终极版

轮播图：可触发效果

：1、按箭头符号可左右切换图片

2、到最后一张的下一张是开头第一张；开头第一张的前一张是最后一张

3、鼠标放在轮播图上时轮播图停止定时器；鼠标移开定时器继续开启

注意：图片需要自己准备且对应

部分HTML代码：

JavaScript代码：

// 获取p元素

const p = document.querySelector('.slider-footer p')

//获取footer

const footer = document.querySelector('.slider-footer')

// 获取右边按钮

const next = document.querySelector('.next')

// 获取左边按钮

const prev = document.querySelector('.prev')

let i = 0

// while (true) {

//渲染对应的数据

function move(i) {

img.src = sliderData[i].url

p.innerHTML = sliderData[i].title

// 获取元素

footer.style.backgroundColor = sliderData[i].color

// 先删掉之前的active

document.querySelector('.slider-indicator .active').classList.remove('active')

// 只让当前的litianjia active

document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')

}

//定时器函数

function timer() {

}

next.addEventListener('click', function () {

// if (i >= 8)

// i = 0

// i++

i++

i = i >= sliderData.length - 1 ? 0 : i

// 调用渲染函数

move(i)

})

prev.addEventListener('click', function () {

// if (i < 0)

// i = 7

i--

i = i < 0 ? sliderData.length - 1 : i

// 调用渲染函数

move(i)

})

// }

// 记录定时器id

let timeId = 0

// 自动播放

timeId = setInterval(function () {

// 利用js自动调用点击事件

next.click()

}, 1000)

document.querySelector('.slider').addEventListener('mouseenter', function () {

// 停止定时器

clearInterval(timeId)

})

//鼠标移开开启定时器

document.querySelector('.slider').addEventListener('mouseleave', function () {

timeId = setInterval(function () {

// 利用js自动调用点击事件

next.click()

}, 1000)

}

)

好文链接