图片切换的练习

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript">
   //onload页面加载完成之后再执行
   window.onload= function (){
    /*
     * 点击按钮切换图片
     */
    //获取按钮
    var one = document.getElementById('one');
    var two = document.getElementById('two');

    /*
     * 切换图片就是要更改src属性
     */
    var img = document.getElementsByTagName('img')[0];
    //创建一个数组，用来保存图片路径
    var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
    //为按钮绑定单击响应函数

    var index=0;
    /*
     * 获取info
     */
    var info = document.getElementById('info');

    one.onclick = function (){
     /*
      * 切换上一张自减
      */
     index--;
     if(index<0){
      index=imgArr.length-1;
     }
     img.src=imgArr[index];
     info.innerHTML='一共'+imgArr.length+'张图片'+'当前'+(index+1)+'张';
    }


    two.onclick = function (){
     index++;
     if(index>imgArr.length-1){

      index=0;
     }
     img.src=imgArr[index];
     info.innerHTML='一共'+imgArr.length+'张图片'+'当前'+(index+1)+'张';
    }

   }
  </script>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   .box{
     500px;
    margin:10px auto;
    padding: 10px;
    background-color: aquamarine;
    text-align: center;
   }
  </style>
</head>
<body>
  <div class="box">
   <p id="info"></p>
   <img src="img/1.jpg" />
   <button id="one" >上一张</button>
   <button id="two" >下一张</button>
  </div>
</body>
</html>