H5 canvas+原生js实现轮播图

自学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;
}

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

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