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

寫的很簡單，沒加動畫效果，有想法的小夥伴可以拿去完善下，希望可以幫助到大家！

我是一名前端小學生，歡迎交流學習心得哈！