今天不在状态,安静五一快到了,俺就特想玩了。好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自动轮换效果,先看图片 下面是具体的代码,还是比较简单的。 复制代码 代码如下: 越狱的囚徒 <BR>.content{ <BR>border:3px solid red; <BR>padding:3px; <BR>width:500px; <BR>height:245px; <BR>position:relative; <BR>} <BR>.content img{ <BR>border:0; <br><br>} <BR>.content div{ <BR>position:absolute; <BR>z-index:1000; <BR>border:2px solid green; <BR>padding:3px 5px; <BR>background:#ccc; <BR>} <BR>.content .cur{background:red;color:white;}//当前显示的图片的小方块,红色背景白色字体 <BR> <BR>var arr=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.gif','images/5.jpg']; <BR>var i=0; <BR>var ob,obk; <BR>function lunhuan(){ <br><br>if(i>4){//数字大于4就从0开始 <BR>i=0; <BR>} <BR>ob=document.getElementById("image1"); <BR>ob.src=arr[i]; <BR>//所有div-0到div-4,背景颜色置灰 <BR>for(var j=0;j<=4;j++){ <BR>document.getElementById("div-"+j).style.backgroundColor='#ccc'; <BR>document.getElementById("div-"+j).style.color='black'; <BR>} <BR>obk=document.getElementById("div-"+i); <BR>obk.style.backgroundColor='red'; <BR>obk.style.color='white'; <BR>i++; <BR>} <BR> 1 2 3 4 5 简单的说下流程: 1.先定义最外层的DIV 2.再定义紧挨着的图片DIV 3.图片右下角的小方块DIV 用计时器函数,实现图片轮换,并让小方块也产生对于的变化。 OK,睡觉。