carousel img 类定义了轮播图中的图片的样式，使其适应容器的尺寸keyframes slide 定义了轮播动画的关键帧，通过 transform translateX 属性来实现水平平移效果最后，carousel slides 类将动画应用到轮播图的图片上。

img的宽高随窗口变化而变化，包裹img的div也随之变化 1打开代码编辑器1html代码的编写3css代码的编写4js的代码编写5在移动端手指触摸轮播图切换效果代码的编写6也可以使用bootstrap框架直接引入css文件。

1首先创建一个html文件，下图中我创建的是html5的，所以看起来很简单2然后在html的主体部分添加一个div标签，然后在该标签下添加一个img标签，并设置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实现轮播效果lttitle ltstyle type=quottextcssquot one position absolute width 500px height 400px overflow hidden one_can。