首先我们图片的元素都是 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>
实现自动轮播