## 1.[JS動畫原理](https://gitee.com/html5_of_the_buddha_department/specialEffect/tree/master/javascript/JS%E5%8A%A8%E7%94%BB) 實現一個簡單動畫 ~~~ //csss #test{ position:absolute; width:100px; height:100px; background:red; left:50px; } //html <div id="test"></div> <button id="btn">btn</button> //js var btn = document.getElementById("btn"); var test = document.getElementById("test"); var timer; btn.onclick = function () { timer = setInterval(function () { if(test.offsetLeft == 300){ clearInterval(timer) }else{ test.style.left = test.offsetLeft+10+"px"; } },100) ~~~ ~~~ 1. 多次點擊btn會有一個明顯的加速效果,因為每點擊一次,開一個定時器 解決方案:在開啟定時器之前,先清除定時器,代碼如下 btn.onclick = function () { clearInterval(timer); timer = setInterval(function () { var speed = 1; if(test.offsetLeft >=300){ clearInterval(timer) }else{ test.style.left = test.offsetLeft+speed+"px"; } },30) } ~~~ ~~~ 動畫要點 If——else 進入動畫,獲取說開啟定時器之前先清除定時器 ~~~ //推薦使用setTimeout這樣不用考慮關閉定時器 ~~~ var btn = document.getElementById("btn"); var test = document.getElementById("test"); var timer; btn.onclick = function () { function go(){ if(test.offsetLeft<100){ test.style.left = test.offsetLeft+10+"px"; setTimeout(go,30) } } go(); } ~~~ ## 2.[輪播](https://gitee.com/html5_of_the_buddha_department/specialEffect/tree/master/javascript/%E7%84%A6%E7%82%B9%E5%9B%BE%E8%BD%AE%E6%92%AD%E6%95%88%E6%9E%9C) [在線演示](https://html5_of_the_buddha_department.gitee.io/banner-lunbo/) //推薦使用setTimeout(),這樣不用考慮關閉定時器