js代码

 <script>
        // 获取元素
        var box = document.getElementsByClassName('box')[0],
            ps = box.getElementsByTagName('p'),
            img = box.getElementsByTagName('img')[0],
            btns = box.getElementsByTagName('button'),
            myLi = box.getElementsByTagName('li');
        

            var arrs = ["../img/1.jpeg","../img/2.jpeg","../img/3.jpeg","../img/4.jpeg"]
            var n = 0;//自定义标识，当n为0时，表示是第一张图片。

        // 操作
        btns[1].onclick = function(){
            n++;
            //图片只有4张，所以n不能大于4
            if(n===arrs.length)n=0;
            ps[0].innerHTML=(n+1) +'/4';
            ps[1].innerHTML='海贼王'+ (n+1);
            // 图片赋值
            img.src = arrs[n];
            //焦点对齐
            //先清空所有Li的所有样式，在重新给选中的li样式
            for(var i=0;i<arrs.length;i++){
               myLi[i].className=""
            }
            myLi[n].className="active"
        }
        btns[0].onclick = function(){           
            n--;           
            if(n===-1)n=3;           
            ps[0].innerHTML=(n+1)+'/4';
            ps[1].innerHTML='海贼王'+(n+1);
            // 图片
            img.src=arrs[n]
            // 焦点对齐
            for(var i=0;i<arrs.length;i++){
                myLi[i].className=""
            }
            myLi[n].className="active"
        }

        // 焦点事件
        for(var i=0;i<arrs.length;i++){
            // 自定义索引
            myLi[i].index=i;
            //给每个Li绑定事件
            myLi[i].onclick = function(){
                ps[0].innerHTML=(this.index+1)+'/4';
                ps[1].innerHTML='海贼王'+(this.index);
                img.src=arrs[this.index]
                for(var i=0;i<arrs.length;i++){
                    myLi[i].className=""
                }
                this.className="active";
                // 保证点击焦点的索引和点击按钮的索引相同。
                n=this.index;
            }
        }
    </script>

html结构

  <div class="box">
        <p class="pl">1/4 </p>
        <p class="pr">海贼王1</p>
        <img src="../img/1.jpeg" alt="">
        <button class="bl">< </button>
        <button class="br">> </button>
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

css样式

  <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 800px;
            height: 600px;
            background: orchid;
            margin: 0 auto;
            position: relative;
        }
        img{
            width: 800px;
            height: 600px;
        }
        button{
            position: absolute;
            top: 300px;
            width: 30px;
            height: 50px;
            font-size: 26px;
            text-align: center;
            line-height: 50px;
            background: rgba(0, 0, 0, .3);
            color: #fff;
        }
        .bl{
            left: 0;
        }
        .br{
            right: 0;
        }
        p{
            position: absolute;
            
            left: 0;
            width: 100%;
            height: 40px;
            background: rgba(10, 172, 236, 0.3);
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 30px;
        }
        .pr{
            bottom: 0;
        }
        ul{
            position: absolute;
            bottom: 50px;
            left: 40%;
            overflow: hidden;
        }
        ul>li{
            float: left;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgb(17, 226, 209);
            margin-right: 20px;
        }
        ul .active{
            background: orange;
        }
    </style>

效果图