轮播图（点击按钮切换）

结构部分：

<div id="container">
        <p></p>
        <img src="./img/img1.jpg" alt="">
        <div class="btn">
            <button>上一张</button>
            <button>下一张</button>
        </div>
    </div>

样式部分：

*{
            margin: 0;
            padding: 0;
        }
        #container{
           width: 450px;
           margin:50px auto;
           padding: 20px;
           text-align: center;
           background-color: antiquewhite;
        }
        img{
            width: 450px;
            height: 200px;
        }
        .btn button{
            background-color: aqua;
            color: white;
            border: 0;
        }

js部分：

 var btn1=document.getElementsByTagName("button")[0];
        var btn2=document.getElementsByTagName("button")[1];
        var img=document.getElementsByTagName("img")[0];
        var p=document.getElementsByTagName("p")[0];
        // 创建一个数组用于放图片地址
        var imgArr=["./img/img1.jpg","./img/img2.jpg","./img/img3.jpg"];
        // 创建一个变量用于存图片索引
        var index=0;
        p.innerHTML="一共有"+imgArr.length+"张图片，这是第"+(index+1)+"张";
        // 点击上一张按钮
        btn1.onclick=function(){
            index--;
            if(index<0){
                index=imgArr.length-1;
            }
            img.src=imgArr[index];
            p.innerHTML="一共有"+imgArr.length+"张图片，这是第"+(index+1)+"张";
        }
        // 点击下一张按钮
        btn2.onclick=function(){
            index++;
            if(index>imgArr.length-1){
                index=0;
            }
            img.src=imgArr[index];
            p.innerHTML="一共有"+imgArr.length+"张图片，这是第"+(index+1)+"张";
        }

效果图（不太好看）：