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>

以上就是javascript实现图片轮播代码。我能在冬天的严酷环境中生存下来,可能我会在春天是最漂亮的。更多关于javascript实现图片轮播代码请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
javascript请求servlet实现ajax示例(分享)

JavaScript操作表单_动力节点Java学院整理

纯javascript的ajax实现php异步提交表单的简单实例

JavaScript实现Ajax总结

初步了解JavaScript,Ajax,jQuery,并比较三者关系