首页 > 开发 > JS > 正文

javascript实现图片轮播代码

2024-05-06 16:53:13
字体:
来源:转载
供稿:网友

javascript图片轮播代码,供大家参考,具体内容如下

因为自己是新手自学不久,所以代码有很多不规范的地方,请原谅。

html部分代码:

<div id="head"> <button id="prev" onmousedown="p()" onmouseout="cal()"><</button><img height="500px" width="500px" src="image/dell.jpg" style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma, arial, "Microsoft YaHei";">	
<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>

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


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表