ps轮播图怎么实现

轮播图现在有很多现成的组件，网上也有很多的教程来教大家写一个轮播图，这里我们用最简单的方式去实现一个轮播图。

首先我们写出我们需要的页面元素，很简单，一个p嵌套着两个p+一个图片。

  <p >        <!-- 左侧按钮 -->        <p  onclick="left()"></p>        <!-- 右侧按钮 -->        <p  onclick="right()"></p>        <!-- 轮播图 -->        <img   src="http://www.wztg.net/wenda/image/1.jpg" alt="">    </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 = ['image/1.jpg', 'image/2.jpg', 'image/3.jpg', 'image/4.jpg']            //当前轮播图数组下标        var i = 0;        function left() {            //默认赋值靠前个路径            el.src = http://www.wztg.net/wenda/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函数已经尽量多的添加了注释，应该非常好理解。以后无论有多少张图片，都只需要把图片路径加到图片数组里就可以了。想自动切换就加个定时器。