純js製作無縫切換slideshow loop

type
status
date
slug
summary
tags
category
icon
password
💡
如果沒有指定不能用JS library,建議直接使用splidejs,可以很簡單製作出幻燈片(slideshow)/圖片輪播(Carousel)

📝 純js製作無縫切換slideshow loop

先來成品，一個可以無限向左右切換的幻燈片(slideshow)，在最後一個圖形按切換時會無縫切換回到第一張

起因:

因為有一個項目demo需要slideshow功能作展示，不過項目有限制不能用第三方的JS library庫，所以只好手寫純JS的slideshow

幻燈片(slideshow)要求:

  • 自動向前方輪播，可以手動控制向前方或最後方輪播
  • 到最前方與最後時，會接到輪播的最後或最前方達成無限循環，如123412
  • 淡出與淡入的移動方式

概念:

當輪播移動到前方與最後時，取消動畫(transition)，再使容器移動(transformX)至最前方或最後方達成無限循環。

code:

 
💡
有關slideshow使用上的問題，歡迎您在底部評論區留言，一起交流~
上一篇
Linux網絡流量監視工具Vnstat和VnStati
下一篇
自製Obsidian繁簡轉換插件
Loading...