简单的实现轮播图，有左右按键和下面的小按键。（也可以设置自动播放）

最新推荐文章于 2024-01-18 22:18:01 发布

原创

最新推荐文章于 2024-01-18 22:18:01 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #轮播图 #前端 #js

这篇博客展示了如何使用HTML、CSS和JavaScript实现一个基本的轮播图，包括左右按键和下方小圆点导航。代码中详细解释了布局、图片切换逻辑以及事件监听。虽然没有实现自动播放功能，但提供了实现思路，即通过定时器触发右移按钮的点击事件。

下面是我的代码，如果有小伙伴想去试试，一定要记得图片的路径问题。必须要把路径弄好。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
</head>
<style>
*{
margin: 0;
padding:0;
}
.box{
width: 672px;
height: 320px;
border: 1px solid red;
margin: 100px auto;
position: relative;
}
.box img{
width: 672px;
height: 320px;
}
ul{
list-style: none;
}
.imglist ul li{
width: 672px;
height: 320px;
position: absolute;
top:0;
left:0;
display: none;
}
.btn span{
width: 50px;
height: 50px;
background:url("../img/2.png");
position: absolute;
top: 50%;
}
.btn .right{
&nbs