JS图片自动轮换效果实现思路附截图_javascript技巧_动视

JS图片自动轮换效果实现思路附截图_javascript技巧

2020-11-27 21:22:16 责编:小采

今天不在状态，安静五一快到了，俺就特想玩了。好了，天色已晚，闲话不多说，看下用javaScript 实现的图片自动轮换效果，先看图片

下面是具体的代码，还是比较简单的。
代码如下:

越狱的囚徒

var arr=['/Uploads/images/1.jpg','images/2.jpg','images/3.jpg','images/4.gif','images/5.jpg'];
var i=0;
var ob,obk;
function lunhuan(){

if(i>4){//数字大于4就从0开始
i=0;
}
ob=document.getElementById("image1");
ob.src=arr[i];
//所有div-0到div-4，背景颜色置灰
for(var j=0;j<=4;j++){
document.getElementById("div-"+j).style.backgroundColor='#ccc';
document.getElementById("div-"+j).style.color='black';
}
obk=document.getElementById("div-"+i);
obk.style.backgroundColor='red';
obk.style.color='white';
i++;
}

1
2
3
4
5

简单的说下流程：

1.先定义最外层的DIV

2.再定义紧挨着的图片DIV

3.图片右下角的小方块DIV

用计时器函数，实现图片轮换，并让小方块也产生对于的变化。

OK，睡觉。

下载本文

显示全文

全部频道