案例介紹

歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用JavaScript編程實戰案例，做一個輪播圖。圖片每3秒自動輪換，也可以點擊左右按鍵輪播圖片，當圖片到達最左端或最右端時，再點擊左右鍵圖片彈回最初始的圖片或最末尾的圖片。通過實戰我們將學會clearTimeout方法、object.style.transform方法。

案例演示

圖片每隔3秒會自動輪播，用戶也可以點擊左右鍵輪播圖片。

案例設計

JavaScript實戰案例-輪播圖
我們來看此案例的思維導圖設計，包括需求描述，頁面設計和技術架構。
其中架構設計包含了HTML，CSS，JavaScript 共三部分代碼。

源碼學習

進入核心代碼學習，我們先來看HTML中的核心代碼。

<!-- 有個小院-興趣編程 -->
<div class="slider-container">
  <div class="image-container">
    <img src="https://picsum.photos/id/237/500/300" alt="image" />
    <img src="https://picsum.photos/id/1/500/300" alt="image" />
    <img src="https://picsum.photos/id/10/500/300" alt="image" />
    <img src="https://picsum.photos/id/20/500/300" alt="image" />
    <img src="https://picsum.photos/id/200/500/300" alt="image" />
  </div>
  <i class="fas fa-angle-double-left btn prev"></i>
  <i class="fas fa-angle-double-right btn next"></i>
</div>

然後我們來編寫核心的JavaScript代碼，通過querySelector獲取HTML元素的信息；設置初始圖片位置；添加下一個按鍵的點擊事件，點擊後圖片向後更換，並暫停自動輪播；添加前一個按鍵的點擊事件，點擊後圖片向前更換，並暫停自動輪播；編寫自動輪播函數，如果圖片到底，就返回初始圖片，圖片在最開始，仍向前查看則返回最末尾圖片，設置圖片輪播動畫。

//有個小院-興趣編程
const nextEl=document.querySelector(".next");
const prevEl=document.querySelector(".prev");
const imgsEl=document.querySelectorAll("img");
const imageConatinerEl=document.querySelector(".image-container");
let currentImg=1;
let timeout;
nextEl.addEventListener("click",()=>{
  currentImg++;
  clearTimeout(timeout);
  updateImg();
});
prevEl.addEventListener("click",()=>{
  currentImg--;
  clearTimeout(timeout);
  updateImg();
});
updateImg();
function updateImg() {
  if(currentImg>imgsEl.length){
    currentImg=1;
  }else if(currentImg<1){
    currentImg=imgsEl.length;
  }
  imageConatinerEl.style.transform=`translateX(-${(currentImg-1)*500}px)`;
  timeout=setTimeout(()=>{
    currentImg++;
    updateImg();
  },3000);
}

總結思考

學習點
1、clearTimeout() 方法可取消由 setTimeout() 方法設置的 timeout，以阻止setTimeout()方法執行函數。
2、object.style.transform設置transform 屬性應用2D或3D轉換。

問答
1、clearTimeout() 可以阻止setTimeout()方法執行函數嗎？
2、object.style.transform是設置transform 屬性的嗎？

關註我，跟著我每天學習一點點，讓你不再枯燥，不再孤單..

全網可搜：小院里的霍大俠， 免費獲取簡單易懂的實戰編程案例。編程/就業/副業/創業/資源。
私微信：huodaxia_xfeater
二維碼： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公眾號：有個小院（微信公眾號：yougexiaoyuan）
github：yougexiaoyuan (視頻源碼免費獲取)
（部分素材來源於互聯網，如有保護請聯繫作者）