简易javascript图片轮播代码

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>