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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。