首先我们图片的元素都是 img 标签，但是使用这个标签的话，当我们点击并且拖动的时候它自带就是可以被拖拽的。当然这个也是可以解决的，但是为了更简单的解决这个问题，我们就把 img 换成 div，然后使用 background-image。
默认 div 是没有宽高的，所以我们需要在组件的 div 这一层加一个 class 叫 carousel，然后在 HTML 中加入 css 样式表，直接选择 carousel 下的每一个 div，然后给他们合适的样式。
// main.js class Carousel extends Component { // 构造函数 // 创建 DOM 节点 constructor() { super(); this.attributes = Object.create(null); } setAttribute(name, value) { this.attributes[name] = value; } render() { this.root = document.createElement('div'); this.root.addClassList('carousel'); // 加入 carousel class for (let picture of this.attributes.src) { let child = document.createElement('div'); child.backgroundImage = `url('${picture}')`; this.root.appendChild(child); } return this.root; } mountTo(parent) { parent.appendChild(this.render()); } }
<!-- main.html --> <head> <style> .carousel > div { width: 500px; height: 281px; background-size: contain; } </style> </head> <body></body> <script src="https://www.jb51.net/article/main.js"></script>
这里我们的宽是 500px，但是如果我们设置一个高是 300px，我们会发现图片的底部出现了一个图片重复的现象。这是因为图片的比例是 1600 x 900，而 500 x 300 比例与图片原来的比例不一致。
所以通过比例计算，我们可以得出这样一个高度： 500 ÷ 1900 × 900 = 281. x x x 500\div1900\times900 = 281.xxx 500÷1900×900=281.xxx。所以 500px 宽对应比例的高大概就是 281px。这样我们的图片就可以正常的显示在一个 div 里面了。
一个轮播图显然不可能所有的图片都显示出来的，我们认知中的轮播图都是一张一张图片显示的。首先我们需要让图片外层的 carousel div 元素有一个和它们一样宽高的盒子，然后我们设置 overflow: hidden。这样其他图片就会超出盒子所以被隐藏了。
这里有些同学可能问：“为什么不把其他图片改为 display: hidden 或者 opacity:0 呢？” 因为我们的轮播图在轮播的时候，实际上是可以看到当前的图片和下一张图片的。所以如果我们用了 display: hidden 这种隐藏属性，我们后面的效果就不好做了。
然后我们又有一个问题，轮播图一般来说都是左右滑动的，很少见是上下滑动的，但是我们这里图片就是默认从上往下排布的。所以这里我们需要调整图片的布局，让它们拍成一行。
这里我们使用正常流就可以了，所以只需要给 div 加上一个 display: inline-block，就可以让它们排列成一行，但是只有这个属性的话，如果图片超出了窗口宽度就会自动换行，所以我们还需要在它们父级加入强制不换行的属性 white-space: nowrap。这样我们就大功告成了。
<head> <style> .carousel { width: 500px; height: 281px; white-space: nowrap; overflow: hidden; } .carousel > div { width: 500px; height: 281px; background-size: contain; display: inline-block; } </style> </head> <body></body> <script src="https://www.jb51.net/article/main.js"></script>
接下来我们来实现自动轮播效果，在做这个之前我们先给这些图片元素加上一些动画属性。这里我们用 transition 来控制元素动效的时间，一般来说我们播一帧会用 0.5 秒 的 ease。
Transition 一般来说都只用 ease 这个属性，除非是一些非常特殊的情况，ease-in 会用在推出动画当中，而 ease-out 就会用在进入动画当中。在同一屏幕上的，我们一般默认都会使用 ease，但是 linear 在大部分情况下我们是永远不会去用的。因为 ease 是最符合人类的感觉的一种运动曲线。
<head> <style> .carousel { width: 500px; height: 281px; white-space: nowrap; overflow: hidden; } .carousel > div { width: 500px; height: 281px; background-size: contain; display: inline-block; transition: ease 0.5s; } </style> </head> <body></body> <script src="https://www.jb51.net/article/main.js"></script>
实现自动轮播