自学canvas的时候练手写的小demo，话不多说，上代码。

html部分

<div id="container">         <div id="leftBtn"></div>         <canvas id="myCanvas" width="515" height="300"></canvas>         <div id="rightBtn"></div>     </div>     <div class="myImgs">         <img src="./imgs/img1.jpeg" id="img1" width="125" height="150" onclick="imgClick(this.id)">         <img src="./imgs/img2.jpeg" id="img2" width="125" height="150" onclick="imgClick(this.id)">         <img src="./imgs/img3.jpeg" id="img3" width="125" height="150" onclick="imgClick(this.id)">         <img src="./imgs/img4.jpg" id="img4" width="125" height="150" onclick="imgClick(this.id)">     </div> 

js部分

//canvas+原生js实现简单轮播图 let myCanvas = document.getElementById('myCanvas') let img1 = document.getElementById('img1') let img2 = document.getElementById('img2') let img3 = document.getElementById('img3') let img4 = document.getElementById('img4') //获取左右按钮 let leftBtn=document.getElementById('leftBtn') let rightBtn=document.getElementById('rightBtn') //“2d”,创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。 var cvs = myCanvas.getContext("2d"); //把默认第一个img放到canvas里 cvs.drawImage(img1,0,0,515,300) //数组是所有轮播图片集合 let list=[] list.push(img1) list.push(img2) list.push(img3) list.push(img4) var index = 0 // var canvasClick=function(){ if (index>2) {         index=-1 }      index++     console.log(index);     cvs.drawImage(list[index],0,0,515,300) } //自动轮播 var interval = window.setInterval(function(){ canvasClick() },2000) //点击图片，切换 let imgClick=function(id){     window.clearInterval(interval) let idx     list.forEach((item,index)=>{ if (id==item.id) {             idx=index         } })     index=idx     console.log(index);     cvs.drawImage(list[index],0,0,515,300)     interval = window.setInterval(function(){ canvasClick() },2000) } //给左右按钮添加点击事件 leftBtn.onclick=function(){ if (index==0) {        index=4 }     window.clearInterval(interval)     index--     console.log(index);          cvs.drawImage(list[index],0,0,515,300)     interval = window.setInterval(function(){ canvasClick() },2000) } rightBtn.onclick=function(){     window.clearInterval(interval) canvasClick()     interval = window.setInterval(function(){ canvasClick() },2000) } 

css部分

#container{ position: relative; width: 515px; height: 300px; } #leftBtn{ width: 20px; height: 20px; position: absolute; left: 5px; top: 50%; transform: translateY(-15px) rotate(45deg); /* background-color: #ccc; */ border-left: 3px solid #000; border-bottom: 3px solid #000; } #rightBtn{ width: 20px; height: 20px; position: absolute; right: 5px; top: 50%; transform: translateY(-15px) rotate(45deg); /* background-color: #000; */ border-top: 3px solid #000; border-right: 3px solid #000; } canvas { border:1px solid  pink; } .myImgs{ margin-top: 10px; width:550px; height:170px } img{ opacity:0.6; } 

写的很简单，没加动画效果，有想法的小伙伴可以拿去完善下，希望可以帮助到大家！

我是一名前端小学生，欢迎交流学习心得哈！