原生JavaScript实现简单轮播图：结构、样式与逻辑详解
作者：小括号时间：2026-10-23 22:59:10浏览：371
本文详细介绍如何使用原生JavaScript实现一个简单的轮播图功能。内容涵盖HTML基本结构搭建、CSS样式初始化与布局设置，以及JavaScript核心逻辑的实现，包括鼠标交互、自动播放、图片切换与指示器同步等功能。
本文分享了一个使用JavaScript实现的简单轮播图示例代码，供读者参考学习。
构建网页基本结构
一、构建网页基本结构
HTML主体部分：
在网页最外层设置一个ID为wrap的容器，替代直接使用body标签，这样便于进行后续的初始化操作。
CSS样式部分：
初始化设置：
对margin（外边距）、padding（内边距）、a（链接）、img（图片）、input（输入框）、ul和li（列表项）、html和body等元素进行统一初始化处理。
CSS具体设置：
根据图片数量及单张图片的宽度，设定轮播图容器的总宽度。
配置JavaScript逻辑
二、配置JavaScript逻辑
需要实现的功能包括：
1. 鼠标移入轮播图区域时，左右浮动切换按钮逐渐显现。 2. 点击左右浮动按钮可切换图片。 3. 点击底部小圆点指示器可切换至对应图片。 4. 切换图片时，同步更新小圆点的选中状态。 5. 实现图片自动播放功能。 6. 鼠标移入轮播图区域时暂停自动播放，移出后恢复自动播放。
具体代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
img{
display: block;
}
input{
outline: none;
}
html,body{
height: 100%;
overflow: hidden;
}
.content{
position: absolute;
top: 0;
left: 0;
}
.banner{
width: 600px;
height: 400px;
position: relative;
margin: 50px auto;
overflow: hidden;
}
.banner .bannerList{
position: absolute;
left:-600px;
top: 0;
width: 4800px;
height: 100%;
}
.banner .bannerList li{
float: left;
width: 600px;
height: 400px;
}
.banner .bannerList li img{
height: 100%;
width: 100%;
}
.banner .left,.banner .right{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 50px;
border: solid 2px gray;
font-size:30px;
text-align: center;
line-height: 50px;
color: rgb(255, 255, 255);
opacity: 0;
transition: 1000ms;
}
.banner .left{
left: 0px;
}
.banner .right{
right: 0px;
}
.banner .point{
position: absolute;
bottom: 30px;
left:50%;
transform: translateX(-50%);
}
.banner .point li{
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: gray;
margin: 5px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var bannerLeft=document.querySelector('.banner .left');
var bannerRight=document.querySelector('.banner .right');
var banner=document.querySelector('.banner')
var bannerList=document.querySelector('.banner .bannerList')
var liList=document.querySelectorAll('.banner .bannerList li')
var pointList=document.querySelectorAll('.banner .point li')
var start=-600;
timer2=setInterval(function(){ //设置定时器，自动播放
var a=30;
var index=bannerList.offsetLeft/-600+1;
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px' //无缝操作
index=2;
}
if(bannerList.offsetLeft==-3600){
index=1;
}
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
timer3=setInterval(function(){
a=a-1
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a==0){
clearInterval(timer3)
}
},
30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px';
}
},4000)
// 创建一个移入出现函数
banner.addEventListener('mouseover',occur)
function occur(){
bannerLeft.style.opacity=1; //移入逐渐出现
bannerRight.style.opacity=1;
clearInterval(timer2); //移入取消自动播放
}
banner.addEventListener('mouseout',function(){
bannerLeft.style.opacity=0;
bannerRight.style.opacity=0; //移出消失
timer2=setInterval(function(){ //移出恢复自动播放
var a=30;
timer3=setInterval(function(){
a=a-1
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a==0){
clearInterval(timer3)
}
},
30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px';
}
},4000)
})
//设置左右浮动块点击变色以及滚动
function colorChange(){
this.style.color='black';
if(this.className=='right'){ //判断是哪边被点击
var index=bannerList.offsetLeft/-600+1;
var a=30;
timer=setInterval(function(){ //点击浮动块切换图片
a=a-1;
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a!=0){
bannerRight.removeEventListener('mousedown',colorChange)
bannerLeft.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer);
bannerRight.addEventListener('mousedown',colorChange)
bannerLeft.addEventListener('mousedown',colorChange)
}
},30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px'
index=2;
}
if(bannerList.offsetLeft==-3600){
index=1;
}
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
}
else{
var a=30;
var index=bannerList.offsetLeft/-600-1;
timer=setInterval(function(){
a=a-1;
bannerList.style.left=bannerList.offsetLeft+20+'px';
if(a!=0){
bannerLeft.removeEventListener('mousedown',colorChange)
bannerRight.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer);
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',colorChange)
}
},30)
if(bannerList.offsetLeft==0){
bannerList.style.left=-3600+'px'
index=5;
}
if(bannerList.offsetLeft==-600){
index=6;
}
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
}
}
function colorReturn(){
this.style.color='white'
}
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',colorChange)
bannerLeft.addEventListener('mouseup',colorReturn)
bannerRight.addEventListener('mouseup',colorReturn)
for(var i=0;i<pointList.length;i++){
pointList[i].onmousedown=function(){
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='gray'
}
this.style.backgroundColor='red';
for(var b=0;b<pointList.length;b++){
if(pointList[b].style.backgroundColor==this.style.backgroundColor){
var a=30;
var step=-(b+1)*600-bannerList.offsetLeft;
timer1=setInterval(function(){
a=a-1;
bannerList.style.left=bannerList.offsetLeft+step/30+'px';
if(a!=0){
bannerLeft.removeEventListener('mousedown',colorChange)
bannerRight.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer1)
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',colorChange)
}
},20)
}
}
}
}
}
</script>
</head>
<body>
<div id="wrap">
<!-- 写出轮播图框架 -->
<div class="banner">
<ul class="bannerList">
<li>
<img src="./img/james6.jpeg">
</li>
<li>
<img src="./img/james1.jpg">
</li>
<li>
<img src="./img/james2.jpg">
</li>
<li>
<img src="./img/james3.jpg">
</li>
<li>
<img src="./img/james4.jpg">
</li>
<li>
<img src="./img/james5.jpeg">
</li>
<li>
<img src="./img/james6.jpeg">
</li>
<li>
<img src="./img/james1.jpg">
</li>
</ul>
<!-- 左右两个箭头 -->
<span class="left"> < </span>
<span class="right"> > </span>
<!-- 添加小圆点 -->
<ul class="point">
<li style="background-color: red;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>其中，将示例中的图片替换为其他图片即可实现不同内容的轮播图。值得注意的是，若需展示六张图片的轮播效果，实际需准备八张图片：第八张图片与第二张相同，第一张图片与第七张相同，最终呈现的视觉效果仅涉及第二张到第七张图片。
相关精彩专题推荐：jQuery图片轮播、JavaScript图片轮播、Bootstrap图片轮播。
以上就是本文的全部内容，希望能为读者学习提供帮助，也欢迎大家继续支持本站。
作者最新文章
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18