请结合给出的素材,实现图9-59所示的“焦 点图轮播”效果,具体要求如下。 (1)当页面加载完成后,每2秒自动切换一 张图片。 (2)切换图片时,其对应按钮的样式同步变 换一背景颜色变为红色。 (3)当鼠标悬停在某个按钮上时,显示该按钮对应的图片且轮播停止。使用html和js编写代码
时间: 2024-02-11 08:08:18 浏览: 42
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>焦点图轮播</title>
<style type="text/css">
.container {
width: 500px;
height: 300px;
position: relative;
margin: 20px auto;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s;
}
.container img.active {
opacity: 1;
}
.btns {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
}
.btn {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
margin: 0 5px;
cursor: pointer;
}
.btn.active {
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<img src="1.jpg" alt="" class="active">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
<div class="btns">
<div class="btn active"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
JS代码:
```js
window.onload = function() {
var container = document.querySelector('.container');
var imgs = container.querySelectorAll('img');
var btns = container.querySelectorAll('.btn');
var index = 0;
var timer = null;
// 切换图片
function changeImg() {
imgs[index].classList.remove('active');
btns[index].classList.remove('active');
index = (index + 1) % imgs.length;
imgs[index].classList.add('active');
btns[index].classList.add('active');
}
// 自动轮播
timer = setInterval(changeImg, 2000);
// 鼠标悬停事件
container.addEventListener('mouseover', function() {
clearInterval(timer);
});
container.addEventListener('mouseout', function() {
timer = setInterval(changeImg, 2000);
});
// 点击按钮切换图片
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function() {
var idx = parseInt(this.getAttribute('data-index'));
if (idx !== index) {
imgs[index].classList.remove('active');
btns[index].classList.remove('active');
index = idx;
imgs[index].classList.add('active');
btns[index].classList.add('active');
}
});
}
}
```
说明:
1. 页面加载后获取容器、图片和按钮元素,设置初始索引为0,定时器为null。
2. 定义changeImg函数用于切换图片。先移除当前显示图片和按钮的active类,计算下一张图片的索引,再添加下一张图片和按钮的active类。
3. 设置定时器,每隔2秒调用changeImg函数自动切换图片。
4. 给容器添加鼠标悬停事件,清除定时器停止轮播;鼠标移开时重新设置定时器开始轮播。
5. 给每个按钮添加点击事件,获取data-index属性值,判断是否与当前索引相同,不同则切换图片并添加active类。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)