<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>轮播图点击切换</title>
<style>
* {
box-sizing: border-box;
}
.slider {
width: 560px;
height: 400px;
margin: auto;
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 class="slider">
<div class="slider-wrapper">
<img src="./images/slider01.jpg" alt="" />
</div>
<div class="slider-footer">
<p>对人类来说会不会太超前了？</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 1. 初始数据
const data = [{
url: './images/slider01.jpg',
title: '奋斗',
color: 'rgb(132, 91, 48)'
},
{
url: './images/slider02.jpg',
title: '风景图1',
color: 'rgb(74, 75, 24)'
},
{
url: './images/slider03.jpg',
title: '海边！',
color: 'rgb(53, 40, 38)'
},
{
url: './images/slider04.jpg',
title: '雪景',
color: 'rgb(191, 190, 196)'
},
{
url: './images/slider05.jpg',
title: '重庆洪崖洞',
color: 'rgb(109, 112, 109)'
},
{
url: './images/slider06.jpg',
title: '重庆火锅',
color: 'rgb(166, 131, 143)'
},
{
url: './images/slider07.jpg',
title: '重庆小面',
color: 'rgb(55, 33, 28)'
},
{
url: './images/slider08.jpg',
title: '重庆火锅宣传图',
color: 'rgb(228, 81, 76)'
},
]
// 获取元素
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
const footer = document.querySelector('.slider-footer')
// 1. 右按钮业务
// 1.1 获取右侧按钮
const next = document.querySelector('.next')
let i = 0 // 信号量 控制播放图片张数
// 1.2 注册点击事件
next.addEventListener('click', function() {
i++
i = i >= data.length ? 0 : i
// 1.3 得到对应的对象
// console.log(data[i])
// 调用函数
toggle()
})
// 2. 左侧按钮业务
// 2.1 获取左侧按钮
const prev = document.querySelector('.prev')
// 1.2 注册点击事件
prev.addEventListener('click', function() {
i--
i = i < 0 ? data.length - 1 : i
// 1.3 得到对应的对象
// console.log(data[i])
// 调用函数
toggle()
})
// 声明一个渲染的函数作为复用
function toggle() {
// 1.4 渲染对应的数据
img.src = data[i].url
p.innerHTML = data[i].title
footer.style.backgroundColor = data[i].color
// 1.5 更换小圆点 先移除原来的类名， 当前li再添加 这个 类名
document.querySelector('.slider-indicator .active').classList.remove('active')
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}
// 3. 自动播放模块
let timerId = setInterval(function() {
// 利用js自动调用点击事件 click() 一定加小括号调用函数
next.click()
}, 1000)
// 4. 鼠标经过大盒子，停止定时器
const slider = document.querySelector('.slider')
// 注册事件
slider.addEventListener('mouseenter', function() {
// 停止定时器
clearInterval(timerId)
})
// 5. 鼠标离开大盒子，开启定时器
// 注册事件
slider.addEventListener('mouseleave', function() {
// 停止定时器
if (timerId) clearInterval(timerId)
// 开启定时器
timerId = setInterval(function() {
// 利用js自动调用点击事件 click() 一定加小括号调用函数
next.click()
}, 1000)
})
// 6. 鼠标经过小li，跳到指定的位置，并修改样式
//6.1获取对象li集合
const indicators = document.querySelectorAll('.slider-indicator li')
//每个小li设置
indicators.forEach((indicator, index) => {
indicator.addEventListener('mouseenter', function() {
i = index
toggle()
})
});
</script>
</body>
</html>
以上代码实现了一个简单的轮播图功
需积分: 0 187 浏览量
2023-08-20
17:49:40
上传
评论
收藏 4.21MB ZIP 举报
slideshow.zip （9个子文件） 
slideshow 
轮播图完整版.html 6KB images 
slider04.jpg 45KB slider08.jpg 513KB slider05.jpg 499KB slider01.jpg 22KB slider03.jpg 1.96MB slider06.jpg 253KB slider07.jpg 392KB slider02.jpg 571KB资源评论
