carousel img 類定義了輪播圖中的圖片的樣式，使其適應(yīng)容器的尺寸keyframes slide 定義了輪播動畫的關(guān)鍵幀，通過 transform translateX 屬性來實現(xiàn)水平平移效果最后，carousel slides 類將動畫應(yīng)用到輪播圖的圖片上。

img的寬高隨窗口變化而變化，包裹img的div也隨之變化 1打開代碼編輯器1html代碼的編寫3css代碼的編寫4js的代碼編寫5在移動端手指觸摸輪播圖切換效果代碼的編寫6也可以使用bootstrap框架直接引入css文件。

1首先創(chuàng)建一個html文件，下圖中我創(chuàng)建的是html5的，所以看起來很簡單2然后在html的主體部分添加一個div標簽，然后在該標簽下添加一個img標簽，并設(shè)置img的寬高3然后我們可以在html頭部標題下添加css樣式代碼來控制div的。

lt！doctype html lthtml lthead ltmeta charset=quotutf8quot lttitle無標題文檔lttitle ltstyle margin0 padding0 body width100% background#000 wrap width793223% margin0 auto。

DOCTYPE html lthtml lthead ltmeta charset=quotUTF8quot lttitleCSS3仿JS輪播圖lttitle ltlink rel=quotstylesheetquot href=quotlbimagecssquot lthead ltbody ltdiv id=quotphotoquot lt！1。

lt！DOCTYPE html lthtml lthead ltmeta charset=quotUTF8quot lttitlecss實現(xiàn)輪播效果lttitle ltstyle type=quottextcssquot one position absolute width 500px height 400px overflow hidden one_can。