轮播图es6做法最完整版，自动播放，按钮换图。。。

最新推荐文章于 2024-05-28 19:26:08 发布

we_lpc

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

文章标签： es6 html servlet

本文链接：https://blog.youkuaiyun.com/we_lpc/article/details/127405954

这篇博客详细介绍了如何使用ES6语法实现一个轮播图功能，包括自动播放、按钮切换图片等功能。示例代码中，轮播图组件包含了图片切换、文字描述更新和背景颜色变化，同时在鼠标悬停时停止自动播放，移开后恢复自动播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

box-sizing: border-box;

}

.slider {

width: 560px;

height: 400px;

overflow: hidden;

}

.slider-wrapper {

width: 100%;

height: 320px;

}

.slider-wrapper img {

width: 100%;

height: 100%;

display: block;

}

.slider-footer {

height: 80px;

background-color: rgb(100, 67, 68);

padding: 12px 12px 0 12px;

position: relative;

}

.slider-footer .toggle {

position: absolute;

right: 0;

top: 12px;

display: flex;

}

.slider-footer .toggle button {

margin-right: 12px;

width: 28px;

height: 28px;

appearance: none;

border: none;

background: rgba(255, 255, 255, 0.1);

color: #fff;

border-radius: 4px;

cursor: pointer;

}

.slider-footer .toggle button:hover {

background: rgba(255, 255, 255, 0.2);

}

.slider-footer p {

margin: 0;

color: #fff;

font-size: 18px;

margin-bottom: 10px;

}

.slider-indicator {

margin: 0;

padding: 0;

list-style: none;

display: flex;

align-items: center;

}

.slider-indicator li {

width: 8px;

height: 8px;

margin: 4px;

border-radius: 50%;

background: #fff;

opacity: 0.4;

cursor: pointer;

}

.slider-indicator li.active {

width: 12px;

height: 12px;

opacity: 1;

}

</style>

</head>

<body>

</div>

<p>对人类来说会不会太超前了？</p>

</ul>

</div>

const data = [

{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },

{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },

{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },

{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },

{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },

{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },

{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },

{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },

]

const img = document.querySelector('.slider-wrapper img')

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

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

let i = 0 //信号量

//获取右边的按钮

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

//添加事件

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

i++

if(i >= data.length){

i = 0

}

img.src = data[i].url

p.innerHTML = data[i].title

pic.style.background = data[i].color

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

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

})

//获取左边的按钮

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

//添加事件

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

i--

if(i <= 0){

i = data.length - 1

}

img.src = data[i].url

p.innerHTML = data[i].title

pic.style.background = data[i].color

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

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

})

//自动播放

let timerId = 0

timerId = setInterval(function(){

next.click()

},1000)

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

//当鼠标进入这个页面时

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

clearInterval(timerId)

})

//当鼠标离开这个页面时

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

timerId = setInterval(function(){

next.click()

},1000)

})

</script>

</body>

</html>