直接先看效果吧：
解釋都寫在代碼裏了，如果需要原文件，可以私聊我隨時在（原文件也有jquery無縫輪播兼容手機瀏覽器和微信瀏覽器哦）。
樣式代碼：
*{margin: 0px;padding:0px;}
body{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
margin-top: 300px;
margin-left: 300px;
}
#box{width: 525px;height: 300px;background-color: #00B834;position: relative;overflow: hidden;}
#canvas{position: absolute;top: 300px;left: 300px;}
#banner{list-style: none;width: 500%;height: 100%;position: absolute;top: 0px;left: 0px;}
#banner li{float: left;width: 20%;height: 100%;}
.tran{transition: all 0.5s;}
#box .mark{position: absolute;width: 100%;height: 20px;bottom: 20px;text-align: center;}
.mark span{display: inline-block;width: 25px;height: 5px;background-color: #a5a2af;border-radius: 3px;margin-left: 15px;}
.mark span:nth-of-type(1){background-color:#b3856af7 ;}
.canvasAnimation{animation: canvas 0.5s forwards;}
@keyframes canvas{
from{opacity: 1;}
to{opacity: 0;}
}
結構代碼：
<div id="box">
<ul id="banner">
<li><img src="img/121519-1563768919b946.jpg" width="100%"height="100%" draggable="false"></li>
<li><img src="img/104217-156298573792c2.jpg" width="100%"height="100%" draggable="false"></li>
<li><img src="img/221508-15605217086e6f.jpg" width="100%"height="100%" draggable="false"></li>
<li><img src="img/230941-15711521814e0c.jpg" width="100%"height="100%" draggable="false"></li>
</ul>
<p class="mark">
</p>
</div>
<canvas id="canvas" width="525" height="300"></canvas>
配置參數：
/* 配置參數 staart */
let canvasimg="img/204822-156742850260f4.jpg";//塗抹前景圖
let smearProportion=40;//設置塗抹比例，大於清除canvas畫布
/* 配置參數 end */
上第一部分的canvas塗抹代碼：
/*塗抹顯示操作 */
let dom=document.getElementById("canvas");
let hb=dom.getContext("2d");
let img=new Image();//創建圖片對象
img.src=canvasimg;
img.onload=function(){//圖片加載完成後把圖片放入畫布
hb.drawImage(img,0,0,525,300);
}
let badge=false;//開關按鈕
function pressDowm(){//鼠標按下打開開關
badge=true;
};
function pictureProportion() {//計算比例
let pixels = hb.getImageData(0, 0, 525, 300);//獲取getImageData，該對象保存了圖片每個像素的數據
let pdata = pixels.data;//像素數據
let len = pdata.length;//像素數據長度
let total = len / 4;//這裏求有多少個像素，一個像素由rgba組成所以每4個數等於++一個像素
let count = 0;//記錄有多少像素透明
for (let i = 0; i < len; i += 4) {
if (parseInt(pdata[i+3]) === 0) {//上面的+4是因爲4個數=1個像素，+3就等於取一個像素中a的值，[r,g,b,a]
count++;//一個像素變爲透明就記錄
}
}
return Math.round((count / total) * 100);//有多少像素透明/總共多少像素再*100，就是百分比，需要加上%號哦。
}
function judgmentRation(num) {//判斷比例
num = num || 0;
if (num > smearProportion) {//比例大於就刪除canvas節點
dom.classList.add("canvasAnimation");
setTimeout(function(){dom.remove();dom.classList.remove("canvasAnimation");},500);
}
};
function mousemove(e){
e.preventDefault();
if(badge){//判斷開關是否開啓
hb.globalCompositeOperation = 'destination-out';//這是必須加的，在原圖像中顯示目標圖像
hb.beginPath();//新建路徑
hb.arc(e.offsetX,e.offsetY,10,0,Math.PI*2);//畫圓
hb.fill();//填充
judgmentRation(pictureProportion());
}
};
function release(){//鼠標鬆開或者移除關閉開關
badge=false;
}
dom.addEventListener("mousedown",pressDowm);
dom.addEventListener("mousemove",mousemove);
dom.addEventListener("mouseup",release);
dom.addEventListener("mouseout",release);
第二部分無縫輪播：
/* banner圖添加操作 */
let ul=document.getElementById("banner");
let box=document.getElementById("box");
let li=ul.querySelectorAll("li");
let mark=document.getElementsByClassName("mark")[0];
for (let i=0;i<li.length;i++) {//添加標識
let span=document.createElement("span");
mark.appendChild(span);
}
let copy=li[0].cloneNode(true);
ul.appendChild(copy);//添加所複製的節點
let moveX=0;//記錄按下時的x座標
let left=0;//記錄翻的頁數
function bannerDown(e){
moveX=e.offsetX;
}
function bannerUp(e){
for(let i=0;i<mark.querySelectorAll("span").length;i++){
mark.querySelectorAll("span")[i].style.backgroundColor="#a5a2af";
}
if((moveX-e.offsetX)>0){
left--;
if(left==-5){
ul.classList.remove("tran");
ul.style.left="0px";
left=-1;
}
setTimeout(function() {//這一步不是多此一舉，我一開始也很納悶怎麼沒有按照上下執行順序執行代碼，jquery是不需要的，js我只能用一個計時器來強制上下文順序
ul.classList.add("tran");
ul.style.left=left+"00%";
}, 10);
}else{
left++;
if(left==1){
ul.classList.remove("tran");
ul.style.left="-400%";
left=-3;
}
setTimeout(function() {
ul.classList.add("tran");
ul.style.left=left+"00%";
}, 10);
}
let bz=Math.abs(left);
if(bz==4){
bz=0;
}
mark.querySelectorAll("span")[bz].style.backgroundColor="#b3856af7";
}
box.addEventListener('mousedown',bannerDown);
box.addEventListener('mouseup',bannerUp);
