案例介紹

歡迎來到我的小院，我是霍大俠，恭喜你今天又要進步一點點了！
我們來用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 (視訊原始碼免費獲取)
（部分素材來源於網際網路，如有保護請聯絡作者）