您好,欢迎来到教玩游戏。
搜索
您的当前位置:首页JS图片自动轮换效果实现思路附截图_javascript技巧

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

来源:教玩游戏
 今天不在状态,安静五一快到了,俺就特想玩了。好了,天色已晚,闲话不多说,看下用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,睡觉。

Copyright © 2019- lvjiaowang.com 版权所有

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务