JavaScript图片转换效果

        *{margin: 0;padding:0;}
        #box{
            width: 320px;
            height: 200px;
            border:1px solid red;
            margin:100px auto;
            position:relative;
        }
        #box p{
            position:absolute;
            top:50%;
            margin-top: -50px;
            background:rgba(0,0,0,0.5);
            color:#fff;
            font-size:50px;
            font-weight:bold;
            width:30px;
            text-align:center;
            line-height:100px;
            cursor:pointer;
        }
        #box #prev{
            left:0;
        }
        #box #next{
            right:0;
        }
        .pic{
            margin: 12px 30px;
            width:260px;
            height: 160px;
            position:relative;
        }
        .text{
            position:absolute;
            left:0;
            bottom: 3px;
            height:20px;
            line-height:20px;
            text-align: center;
            color:yellow;
            width:100%;
            background: rgba(255,0,0,.5);
        }

 window.οnlοad=function() {
            var oPrev = document.getElementById('prev');
            var oNext = document.getElementById('next');
            var oImg = document.getElementById('img');
            var iNow = 1;
            oNext.οnclick=function (){
                iNow++;                     //iNow是定义的一个变量并赋上值
                if(iNow==6){
                    iNow=1;                   -------点击一下事件iNow+1,当iNow==6时，iNow将变成1
                }
                oImg.src='../img/'+iNow+'.jpg';/*注：一共是5张图，所以当你点击第五张时自动转到第一张*/
            };
            oPrev.onclick = function () {
                iNow--;                     
                if (iNow == 0) {
                    iNow = 5;
                }
                oImg.src = '../img/' + iNow + '.jpg';
            };
        };

 <div id="box">
       <p id="prev"><</p>
       <p id="next">></p>
       <div class="pic">
           <img id="img" width="260px" heght="160px" src="../img/1.jpg" alt=""/>
           <div class="text">哈士奇;憨厚、忠诚、傻傻的</div>
       </div>
   </div>