具体实现步骤：
2.1点击右箭头让图片依次往后进行切换如果切换到最后一张回到第一张1--2--3--4--1
2.1.1获取元素按钮pimg
2.1.2添加事件加给按钮
2.1.3图片切换到下一张
2.1.4不知道是第几张图假设n=1
2.1.5更新img的地址img.src='';
2.1.6图片+1之后判断是不是已经是最后一张如果n==5n=1
2.2点击左箭头让图片依次往前切换如果是第一张回到最后一张1--4--3--2--1
2.2.1获取元素按钮pimg
2.2.2添加事件加给按钮
2.2.3图片切换到上一张
2.2.4通过n获取当前是第几张图片
2.2.5更新img的地址img.src='';
2.2.6图片-1之后判断是不是已经是第一张如果n==0n=4
<style>* {padding: 0;margin: 0;}.wrap {position: relative;width: 700px;height: 400px;margin: 10px auto;}.wrap p {color: #fff;text-align: center;line-height: 20px;background-color: #000;}.wrap img {vertical-align: middle;width: 100%;height: 360px;}.wrap button {width: 30px;height: 30px;font-size: 20px;color: #fff;background: rgba(0, 0, 0, 0.5);text-align: center;line-height: 30px;outline: none;position: absolute;top: 50%;margin-top: -15px;}.btn1 {right: 0;}.btn2 {left: 0;}</style>
<div class="wrap"><p>1/4</p><img src="./img1.jpg" alt=""><p>动漫1</p><button class="btn1">></button><button class="btn2"><</button></div>
<script>//1、获取元素 按钮 p imgvar img = document.getElementsByTagName('img')[0];var btns = document.getElementsByTagName('button');var ps = document.getElementsByTagName('p');console.log(btns, img, ps);//4、不知道照片处于第几张 假设一个变量存初始值var n = 1;//2、添加事件 加给按钮 btnsbtns[0].onclick = function () {//3、写具体代码操作 n++;console.log(n);if (n == 5) {n = 1}//5、图片切换到下一张img.src = './img' + n + '.jpg'//获取p标签内容//设置p标签内容里面的数字ps[0].innerHTML = n + '/4';ps[1].innerHTML = '动漫' + n;}btns[1].onclick = function () {//3、写具体代码操作 图片切换到下一张n--;console.log(n);if (n == 0) {n = 4}//5、切换图片img.src = './img' + n + '.jpg'//获取p标签内容//设置p标签内容里面的数字ps[0].innerHTML = '' + n + '/4';ps[1].innerHTML = '动漫' + n;}</script>
效果：
