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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。