js动态改变img src的参数

light86 2011-11-28 11:20:01
现在要动态切换img src里的参数
也就是说有三个图片,想轮流显示
我的想法是
var a,b,c;

a="a.jpg";
b="b.jpg";
c="c.jpg";


<img id='imgid' src='a.jpg'>

现在我想通过这个imgid来动态切换src,想3秒钟切换一次,应该可以用setTimeout();

这应该不是难事,请大家帮个忙,我JS不精通。
...全文
954 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
light86 2011-11-28
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 fxfeng2000 的回复:]
JScript code


var a=["a.jpg","b.jpg","c.jpg"],i=0;
function changeImg(){
imgid.src=a[i%3];
i++;
}
setInterval("changeImg()",3000);
[/Quote]

谢谢
EPC 2011-11-28
  • 打赏
  • 举报
回复
[Quote=引用楼主 light86 的回复:]
现在要动态切换img src里的参数
也就是说有三个图片,想轮流显示
我的想法是
var a,b,c;

a= "a.jpg ";
b= "b.jpg ";
c= "c.jpg ";


<img id= 'imgid ' src= 'a.jpg '>

现在我想通过这个imgid来动态切换src,想3秒钟切换一次,应该可以用setT……
[/Quote]

+2
wis2007 2011-11-28
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 fxfeng2000 的回复:]

JScript code

var a=["a.jpg","b.jpg","c.jpg"],i=0;
function changeImg(){
imgid.src=a[i%3];
i++;
}
setInterval("changeImg()",3000);
[/Quote]
hch126163 2011-11-28
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 fxfeng2000 的回复:]

JScript code

var a=["a.jpg","b.jpg","c.jpg"],i=0;
function changeImg(){
imgid.src=a[i%3];
i++;
}
setInterval("changeImg()",3000);
[/Quote]
+++
licip 2011-11-28
  • 打赏
  • 举报
回复
1楼的可以
shenzhenNBA 2011-11-28
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 fxfeng2000 的回复:]

JScript code

var a=["a.jpg","b.jpg","c.jpg"],i=0;
function changeImg(){
imgid.src=a[i%3];
i++;
}
setInterval("changeImg()",3000);
[/Quote]
+1
bennman 2011-11-28
  • 打赏
  • 举报
回复

(function(){
var pic=document.getElementById('imgid');
var arr=['a','b','c'],n=0;
(function(){
pic.src='images/'+arr[n]+'.jpg';
n=n<2?n+1:0;
setTimeout(arguments.callee,3000);
})();
})();


你的结贴率 让人望而生畏啊
fxfeng2000 2011-11-28
  • 打赏
  • 举报
回复

var a=["a.jpg","b.jpg","c.jpg"],i=0;
function changeImg(){
imgid.src=a[i%3];
i++;
}
setInterval("changeImg()",3000);
bennman 2011-11-28
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 bennman 的回复:]

JScript code

(function(){
var pic=document.getElementById('imgid');
var arr=['a','b','c'],n=0;
(function(){
pic.src='images/'+arr[n]+'.jpg';
n=n<2?n+……
[/Quote]
这代码有问题么
什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。 怎么实现ImageLazyLoad 一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compiler.appspot.com/home 虽然是很牛X的特效,不过用JQuery插件只需要短短几句代码,使用过程如下: 1.导入JS插件 <script src="jquery.js" type="text/javascript">src="jquery.lazyload.js" type="text/javascript">img").lazyload(); 这将会使所有的图片都延迟加载。 当然插件还有几个配置项可供设置。 1.改变threshold $(“img”).lazyload({ threshold : 200 }); 把阀值设置成200 意思就是当图片没有看到之前先load 200像素。 2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件 $("img").lazyload({ placeholder : "img/grey.gif", event : "click" }); 3.可以通过定义effect 参数来定义一些图片显示效果 $("img").lazyload({ placeholder : "img/grey.gif", effect : "fadeIn" }); LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载,对数据同样可以,Google Reader和Bing图片搜索就把 LazyLoad技术运用的淋漓尽致; 缺陷: 1.与Ajax技术的冲突; 2.图片的延迟加载,遇到高度特别高的图片,会出现停止加载的问题; 3.写代码不规范的同学要注意了,不管由于什么原因,如果您的页面中,img标签的height属性未定义,那么我建议您最好不要使用ImageLazyLoad

87,907

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧