html页面的轮播图
时间: 2023-12-18 21:27:32 浏览: 40
以下是一个使用HTML、CSS和JavaScript实现的简单轮播图示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
/* 清除默认样式 */
body, ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
/* 设置轮播图容器的宽度和高度 */
#slider {
width: 600px;
height: 300px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
/* 设置轮播图中的图片的宽度和高度 */
#slider img {
width: 600px;
height: 300px;
position: absolute;
top: 0;
left: 0;
display: none;
}
/* 设置轮播图中的按钮的样式 */
#slider .btn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
#slider .btn span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
}
#slider .btn span.active {
background-color: #f00;
}
</style>
</head>
<body>
<div id="slider">
<img src="img/1.jpg" alt="图片1">
<img src="img/2.jpg" alt="图片2">
<img src="img/3.jpg" alt="图片3">
<div class="btn">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script>
// 获取轮播图容器和图片
var slider = document.getElementById('slider');
var imgs = slider.getElementsByTagName('img');
// 获取按钮
var btns = slider.getElementsByClassName('btn')[0].getElementsByTagName('span');
// 定义变量
var index = 0; // 当前显示的图片的索引
var timer = null; // 定时器
// 显示图片的函数
function showImg() {
// 隐藏所有图片
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.display = 'none';
}
// 显示当前图片
imgs[index].style.display = 'block';
// 切换按钮的样式
for (var i = 0; i < btns.length; i++) {
btns[i].className = '';
}
btns[index].className = 'active';
}
// 自动播放函数
function autoPlay() {
timer = setInterval(function() {
index++;
if (index >= imgs.length) {
index = 0;
}
showImg();
}, 2000);
}
// 初始化函数
function init() {
// 显示第一张图片
showImg();
// 自动播放
autoPlay();
// 鼠标移入轮播图容器时停止自动播放
slider.onmouseover = function() {
clearInterval(timer);
}
// 鼠标移出轮播图容器时继续自动播放
slider.onmouseout = function() {
autoPlay();
}
// 点击按钮切换图片
for (var i = 0; i < btns.length; i++) {
btns[i].index = i;
btns[i].onclick = function() {
index = this.index;
showImg();
}
}
}
// 调用初始化函数
init();
</script>
</body>
</html>
```
相关推荐
![](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)