想要具体的html代码
时间: 2023-10-29 08:06:59 浏览: 36
好的,以下是一个简单的焦点图切换按钮的 HTML 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>焦点图切换按钮示例</title>
<style type="text/css">
.container {
position: relative;
width: 500px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.container img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s;
width: 100%;
height: 100%;
}
.container img.active {
opacity: 1;
}
.btn-group {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 1;
}
.btn-group button {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
background-color: #ccc;
border: none;
cursor: pointer;
}
.btn-group button.active {
background-color: #000;
}
</style>
</head>
<body>
<div class="container">
<img src="img1.jpg" alt="图片1" class="active">
<img src="img2.jpg" alt="图片2">
<img src="img3.jpg" alt="图片3">
<div class="btn-group">
<button class="active"></button>
<button></button>
<button></button>
</div>
</div>
<script type="text/javascript">
var imgs = document.querySelectorAll('.container img');
var btns = document.querySelectorAll('.btn-group button');
var index = 0;
var timer;
function showImg() {
for (var i = 0; i < imgs.length; i++) {
imgs[i].classList.remove('active');
btns[i].classList.remove('active');
}
imgs[index].classList.add('active');
btns[index].classList.add('active');
index++;
if (index >= imgs.length) {
index = 0;
}
timer = setTimeout(showImg, 3000);
}
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function() {
clearTimeout(timer);
index = this.getAttribute('data-index');
showImg();
});
btns[i].setAttribute('data-index', i);
}
showImg();
</script>
</body>
</html>
```
这个示例包括一个容器 div、三个 img 标签、三个按钮,使用了 HTML、CSS 和 JavaScript 技术实现焦点图切换和按钮切换的效果。其中,CSS 样式设置了容器的宽度、高度、overflow 属性,以及图片的定位、透明度、过渡效果等;JavaScript 代码实现了自动切换和按钮点击事件的处理。
相关推荐
![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)