Tag: javascript

前言 圖片輪播應該是網頁上蠻常見的圖片顯示方式，在面對很多張圖片需要顯示的時候，輪播確實是個很好用的方法。 在實作上有好幾種方法，有些並沒有使用成功，在這邊做一個紀錄。 目錄 1. CSS 動態播放2. 延遲秒數更改圖片3. Slick 圖片輪播4. 點擊按鈕改變圖片 CSS 動態播放 這種播放方式是將圖片設置好，然後持續播放，而且只需更改 CSS ，非常方便使用。但缺點就是它是自動的，沒辦法再用手動去控制它。 以上完成第一種方式 延遲秒數更改圖片 js 寫法 1. 設定圖片內容 不太喜歡，因為更新整個頁面，跳動感覺很不舒服，有點影響觀看。 以上完成第二種方式 Slick 這是一個很好用的輪播方式 Demo 網頁: https://kenwheeler.github.io/slick/ 首先加入CDN CDN:<script type=”text/javascript” src=”https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js“></script> <link rel=”stylesheet” type=”text/css” href=”https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.css“/><link rel=”stylesheet” type=”text/css” href=”https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick-theme.css“/> 設定輪播圖片的 style CSS JS HTML 以上完成第三種方式 點擊按鈕改變圖片 最後是使用按鈕改變圖片的方式 可以上下調整觀看圖片，這個也很方便兒 HTML 寫法如下: JS 寫法: 以上完成第四種方式 Read more