郑州网站建设业务咨询热线：
0371-65349913 / 15333818157
0371-65349913 / 15333818157
本网页展示了利用javascript技术实现十副图片轮流显示效果，方法虽然简单，但却很使用。有兴趣的朋友也可以在此基础上增加DIV+CSS技术来控制图片显示的其他效果，实现网页上banner图片轮显，或者实现网页版块中轮显图片信息的效果。下面，郑州网站建设公司的小编整理了javascript实现图片轮显的源代码如下，可供建站用户和网站建设技术人员参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>利用Javascript技术实现图片轮显效果</title>
<script type="text/javascript">
var curIndex=0;
//时间间隔 单位毫秒
var timeInterval=6000;
var arr_img=new Array();
var arr_alt=new Array()
//图片数组
arr_img[0]="img0.jpg";
arr_img[1]="img1.jpg";
arr_img[2]="img2.jpg";
arr_img[3]="img3.jpg";
arr_img[4]="img4.jpg";
arr_img[5]="img5.jpg";
arr_img[6]="img6.jpg";
arr_img[7]="img7.jpg";
arr_img[8]="img8.jpg";
arr_img[9]="img9.jpg";
//图片的alt属性数组
altarr_alt[0]="第1幅图片";
arr_alt[1]="第2幅图片";
arr_alt[2]="第3幅图片";
arr_alt[3]="第4幅图片";
arr_alt[4]="第5幅图片";
arr_alt[5]="第6幅图片";
arr_alt[6]="第7幅图片";
arr_alt[7]="第8幅图片";
arr_alt[8]="第9图片";
arr_alt[9]="第10幅图片";
setInterval(ChangeImage,timeInterval);
function ChangeImage()
{
var obj=document.getElementById("imageshow");
if (curIndex==arr_img.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src="images/"+arr_img[curIndex];
obj.alt=arr_alt[curIndex];
}
</script>
</head>
<body>
<img src="images/img1.jpg" alt="第1幅图片" width="300" height="200" id="imageshow" />
</body>
</html>