使用js做简易轮播图，可自动

最新推荐文章于 2025-04-19 20:40:49 发布

置顶

Slowlyhandsome

最新推荐文章于 2025-04-19 20:40:49 发布

阅读量1.9k

点赞数 2

分类专栏： js 文章标签： js 轮播图

本文链接：https://blog.youkuaiyun.com/slowlyhandsome/article/details/83997289

版权

本文介绍如何使用JavaScript创建一个简易的自动轮播图。通过定义图片数组，使用JavaScript改变图片地址并添加上一张、下一张切换功能，结合CSS美化，实现了自动轮播和鼠标悬停显示按钮的效果。此外，还解决了在边界切换时的特殊判断以及按钮显示隐藏的交互问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【作者注】：第一次使用js做简易轮播图
首先在body里div个容器

div class="box">
<p id="p" ></p>
<img src="img/1.png" alt="">
<button id="prev" ><</button>
<button id="next" >></button>
</div>

.box{
width: 1280px;
height: 550px;
margin: 0 auto;
text-align: center;
position: relative;
}
.box img{
width: 1280px;
height: 550px;
}
.box button{
width: 50px;
height: 100px;
}
#prev{
position: absolute;
top: 50%;
left: 0%;
display: inline-block;
}
#next{
position: absolute;
top: 50%;
right: 0%;
display: inline-block;
}

顺便用css样式设置一下盒子，给它撑开一个大小跟图片一样的位置，
按钮样子也可以设置一下，相对定位到图片的最左中，和最右中位置。
最上面一个img标签，默认为第一张图片的地址，
两个按钮，上一个和下一个
主要就是用js循环改变图片的地址，再稍加修饰美观，以下均在script中实现
首先在js中定义一个数组，把所有的图片地址添加进来