javascript图片轮播代码

因为自己是新手自学不久，所以代码有很多不规范的地方，请原谅。

html部分代码：

<div id="head"> <button id="prev" onmousedown="p()" onmouseout="cal()"><</button><img height="500px" width="500px" src="image/dell.jpg" alt="Dell"><button id="next" onmousedown="n()" onmouseout="cal()">></button></div>

CSS部分代码：

<style type="text/css">*
{margin: 0;padding: 0;
}#head
{width:800px;height:500px;border-radius: 5px;border: 2px solid pink;margin: 200px auto;text-align: center; 
}#prev
{width: 30px;height: 30px;border: 0px;border-radius: 5px;background-color:white;color: black;position: relative;margin-top: 250px;float: left; 
}#next
{width: 30px;height: 30px;border: 0px;border-radius: 5px;background-color:white;color: black;position: relative;margin-top: 250px;float: right; 
}</style>

javascript部分代码：

<script>var prev=document.getElementById("prev");var next=document.getElementById("next");var img=document.getElementsByTagName("img")[0];var imgArr=["image/dell.jpg/dell.jpg","image/dell.jpg/sony.jpg","image/dell.jpg/费列罗.jpg","image/dell.jpg/Nike.jpg"];var index=0;//点击左箭头，切换上一张function p(){if(index==0){index=imgArr.length;}index--;img.src=imgArr[index];}//点击右箭头，切换下一张function n(){if(index==imgArr.length){index=0;}img.src=imgArr[index];index++;}//设置自动播放time=setInterval("p()",2000);//鼠标移入箭头内，停止自动播放function cal(){clearInterval(time);}</script>