javascript中如何正确加载背景图片？-PHP中文网问答

初心者跟着慕课教程学了几天javascript基础，于是想做个图片切换的效果，可是写了一堆代码，背景图片就是加载不进来；## 标题文字 ##请输入代码
　　　　 <style>

    *{
        margin:0;
        padding:0;
        text-decoration:none;
    }
    #content{
        width:700px;
        height:500px;
        background-color:pink;
        margin:auto;
        border-radius:50px;
        position:relative;
        top:50px;

    }
    a{
        display:block;
        width:50px;
        height:20px;
        font-size:14px;
        color:black;
        text-align:center;
        position:absolute;
        top:240px;
        opacity:0.5;
    }
    a:hover{
        opacity:0.9;
        color:red;
    }
    #prev{
        left:20px;
    }
   #next{
       right:20px;
   }
    #pictures{
        width:500px;
        height:400px;
        position:absolute;
        top:50px;
        left:100px;
        border:1px solid green;

    }
    #text1,#text2{
        width:500px;
        height:20px;
        font-size:16px;
        text-align:center;
        background-color:#ccc;
        position:absolute;
    }
    #text1{
        top:0;
    }
    #text2{
        bottom:0;
    }
    </style>

    window.onload=function(){
        var oPrev=document.getElementById("prev");
        var oNext=document.getElementById("next");
        var oSpan=document.getElementById("text1");
        var oPictures=document.getElementById("pictures");
        var oText=document.getElementById("text2");
        var arrUrl=["images/pic1.png","images/pic2.png","images/pic3.png","images/pic4.png","images/pic5.png","images/pic6.png"];
        var arrText=["少女の美しさ","心の絆","雨と泪","紫の夢","水上の蝶","賑やかな風景"];
        var i=0;
        function begin(){
            oSpan.innerHTML = i + 1 + "/" + arrText.length;
            oPictures.style.backgroundImage = arrUrl[i];
            oText.innerHTML = arrText[i];
        }
        begin();
        oPrev.onclick=function prev(){
            i--;
            if(i==-1){
                alert("已经是第一张啦");
                i=0;
            }
            begin();
        }
        oNext.onclick=function next(){
            i++;
            if(i==6)
            {
                alert("已经是最后一张啦");
                i=arrUrl.length-1;
            }
            begin();
        }

</script>

</head>
<body>
<p id="content">

  <a id="prev" href="javascript:;"><-prev</a>
  <a id="next" href="javascript:;">next-></a>
  <p id="pictures">
      <span id="text1">图片序号正在计算中</span>
      <p id="text2">图片文字正在加载中</p>
  </p>

</p>
</body>
其他部分都没问题的样子，但是背景图片怎么都加载不进来，请问各位前辈这是什么问题呢？小白不懂是哪里的问题，只好把所有的代码都贴上来了。