轮播图现在有很多现成的组件，网上也有很多的教程来教大家写一个轮播图，这里我们用最简单的方式去实现一个轮播图。
首先我们写出我们需要的页面元素，很简单，一个p嵌套着两个p+一个图片。
然后我们写一下这几个样式
.box { width: 100%; height: 100%; padding-top: 10%; display: flex; align-content: flex-start; align-items: center; justify-content: center;} /* 采用绝对定位，在当前页面定位切换按钮的位置 */.box-left { position: absolute; width: 50px; height: 200px; top: 50%; left: 0; transform: translateY(-50%); background-color: rgb(13, 167, 202); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}.box-right { position: absolute; width: 50px; height: 200px; top: 50%; right: 0; transform: translateY(-50%); background-color: rgb(13, 167, 202); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}.swiper-img { width: 100%; height: 100%;}
最后我们再写下切换用的两个函数
//获取轮播图元素 var el = document.getElementById(‘swiper’); //待切换轮播图路径，组合成数组 var image = [‘//imgq8.q578.com/ef/0621/4609e78737f709a1.jpg’, ‘image/2.jpg’, ‘image/3.jpg’, ‘image/4.jpg’] //当前轮播图数组下标 var i = 0; function left() { //默认赋值第一个路径 el.src = image[i]; //路径下标+1，切换路径 i++; //路径下标超出数组长度，赋值为0 if (i == image.length) { i = 0; } } function right() { //默认赋值第一个路径 el.src = image[i]; //路径下标-1，切换路径 i–; //路径下标太低，赋值为数组长度-1 if (i == -1) { i = image.length – 1; } }
JS函数已经尽量多的添加了注释，应该非常好理解。以后无论有多少张图片，都只需要把图片路径加到图片数组里就可以了。想自动切换就加个定时器。
收工。
