原生JS代码做一个简单的轮播图

最新推荐文章于 2026-05-24 11:29:27 发布

原创最新推荐文章于 2026-05-24 11:29:27 发布 · 943 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

这篇博客介绍如何用原生JavaScript实现一个简单的轮播图功能，包括自动轮播、点击按钮切换图片和小图片联动切换大图片。代码结构清晰，适合图片数量不多的情况，轮播图尺寸可自定义，并通过JS控制箭头的显示和隐藏。

以下代码都打完时，就会实现轮播功能

（1）图片自动轮播
（2）点击按钮时会切换图片
（3）点击小图片时，大图片也会相应的改变
此轮播图代码通俗易懂，如果图片不多则比较适合，对于整个轮播图片的宽度和高度可以随自己的需要而改变

1.htmls代码进行布局

<body onload="start()">  
<div class="chart">
    <img src="img/gg01.jpg" alt="" id="bg-img"/>
    <div class="box-imgs">
        <div class="box-img"><img src="img/gg01.jpg" alt="" class="img01"/></div>
        <div class="box-img"><img src="img/gg02.jpg" alt="" class="img01"/></div>
        <div class="box-img"><img src="img/gg03.jpg" alt="" class="img01"/></div>
        <div class="box-img"><img src="img/gg04.jpg" alt="" class="img01"/></div>
    </div>
    <div class="left"> < </div>
    <div class="right"> > </div>
</div>
</body>

2.css代码样式

*{
    margin: 0;
    padding: 0;
}
.chart{
    width: 100%;
    height: 600px;
    position: relative;
}
#bg-img{
    width: 100%;
    height: 100%;
}
.box-imgs{
    width: 80%;
    height: 200px;
    position: absolute;
    bottom: 10px;
    left: 10%;
  /*  border: 1px solid red;*/
}
.box-img{
    width: 25%;
    height: 200px;
   /* border: 1px solid black;*/
    box-sizing: border-box;
    float: left;
    padding: 8px;
}
.img01{
    width: 100%;
    height: 100%;
    border: 2px solid white;
}
.left{
    font-size: 50px;
    font-weight: bold;
    color: white;
    position: absolute;
    top: 270px;
    left: 30px;
    display: none;
}
.right{
    font-size: 50px;
    font-weight: bold;
    color: white;
    position: absolute;
    top: 270px;
    right: 30px;
    display: none;
}

页面呈现效果

在这里插入图片描述
注意：两边的箭头一开始是隐藏的，用js控制只有当鼠标移入的时候，箭头才出现，鼠标移出时箭头就会隐藏

3.js代码

 var chart=document.getElementsByClassName('chart');   //整个轮播图
    var bgImg=document.getElementById('bg-img');  //body里面插入的唯一一张照片
    var left=document.getElementsByClassName('left');  //左箭头
    var right=document.getElementsByClassName('right');  //右箭头
    var img=document.getElementsByClassName('img01'); //下面四张照片的集合
    var t;  //变量t 后面被赋予定时器
    //start方法  轮播图片开始
    function start(){
        t=setInterval(function(){
            if(bgImg.src.match('gg01.jpg')){
                bgImg.src='img/gg02.jpg'
            }else if(bgImg.src.match('gg02.jpg')){
                bgImg.src='img/gg03.jpg'
            }else if(bgImg.src.match('gg03.jpg')){
                bgImg.src='img/gg04.jpg'
            }else{
                bgImg.src='img/gg01.jpg'
            }
        },1000)
    }
    //stop方法 其实就是清除定时器t
    function stop(){
        clearInterval(t)
    }
    //鼠标移入时 图片不轮播 两边箭头出现
    chart[0].onmouseover=function(){
        stop();
        left[0].style.display='block';
        right[0].style.display='block';
    }
    //鼠标移出时 图标轮播 两边箭头隐藏
    chart[0].onmouseout=function(){
        start();
        left[0].style.display='none';
        right[0].style.display='none';
    }
    //给左箭头添加点击事件 
    left[0].onclick=function(){
        if(bgImg.src.match('gg01.jpg')){
            bgImg.src='img/gg04.jpg'
        }else if(bgImg.src.match('gg04.jpg')){
            bgImg.src='img/gg03.jpg'
        }else if(bgImg.src.match('gg03.jpg')){
            bgImg.src='img/gg02.jpg'
        }else{
            bgImg.src='img/gg01.jpg'
        }
    }
    //给右箭头添加点击事件 
    right[0].onclick=function(){
        if(bgImg.src.match('gg01.jpg')){
            bgImg.src='img/gg02.jpg'
        }else if(bgImg.src.match('gg02.jpg')){
            bgImg.src='img/gg03.jpg'
        }else if(bgImg.src.match('gg03.jpg')){
            bgImg.src='img/gg04.jpg'
        }else{
            bgImg.src='img/gg01.jpg'
        }
    }
    //给下面的四张小图片分别添加点击事件 
    //使点击小图片时 大图片也会相应的改变 
    img[0].onclick=function(){
        bgImg.src='img/gg01.jpg'
    }
    img[1].onclick=function(){
        bgImg.src='img/gg02.jpg'
    }
    img[2].onclick=function(){
        bgImg.src='img/gg03.jpg'
    }
    img[3].onclick=function(){
        bgImg.src='img/gg04.jpg'
    }