简易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部分代码：

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>