文档章节

用js实现图片的轮转

乱世中的单纯
 乱世中的单纯
发布于 2015/12/12 12:39
字数 176
阅读 62
收藏 4
<div id="bg" style="position:relative"> <img id="pic" height="768" width="1024" alt="">
<div id="boy" style="position:absolute;left:0;bottom:0"><img src="3.jpg" alt="" width="100" height="100"></div></div>
<script>
 
var arr=new Array();
arr[0]="1.jpg";//放图片地址
arr[1]="2.jpg";
var num=0;
setInterval(turnpic,2000); //每隔2秒转换图片
 function turnpic(){
   idsrc=document.getElementById("pic");
   if(num==arr.length-1)
        num=0;
   else
        num+=1;
   idsrc.src=arr[num];
}
 
</script>

实现效果:(后面的大图片是由两张图片轮流转换,前面的小图片则固定不动)

如果只要轮转效果,而不要前面的小图片,可以去掉<div id="boy"></div>的内容。这里的小图片是为了实现相对位移和固定位移的效果。

© 著作权归作者所有

共有 人打赏支持
乱世中的单纯
粉丝 10
博文 62
码字总数 36267
作品 0
广州
程序员
javascript中的线程之我见

今天与一个同事争论javascripe中间的线程机制,他争论说javascript是有线程的,理由即使javascript中间的事件回调就是线程的实现,个人认为在javascript中是没有线程机制的 理由如下: 引自《...

mj4738
2013/02/11
0
0
网站数据统计分析之一:日志收集原理及其实现

网站数据统计分析工具是网站站长和运营人员经常使用的一种工具,比较常用的有谷歌分析、百度统计 和 腾讯分析等等。所有这些统计分析工具的第一步都是网站访问数据的收集。目前主流的数据收集...

大数据之路
2014/07/19
0
3
利用CSS、JavaScript及Ajax实现图片预加载的三大方法

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证...

詹真琦
2013/12/08
0
1
利用CSS、JavaScript及Ajax实现图片预加载的三大方法

摘要:图片的加载速度往往影响着网站整体的用户体验,尤其对于包含大量图片的网站。对图片进行预加载,不失为一个高效的解决方案。如何实现预加载?本文将例举利用CSS、JavaScript及Ajax实现...

spademan
2013/10/22
0
0
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
0
5

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0
SpringBoot2.0 停机

最近新建了个SpringBoot2.0的项目,因为原来一直使用的是传统的Tomcat部署war包的形式,所以这次SpringBoot内置Tomcat部署jar包的时候遇到了很多问题。其中一个就是因为没有外置的Tomcat容器...

Canaan_
昨天
0
1
Confluence 6 外部参考

一个外部参考的意思是任何站点链接到你 Confluence 的实例。任何时候当 Confluence 的用户单击这个外部链接的时候,Confluence 可以记录这次单击为参考。 在默认的情况下,外部链接的参考链接...

honeymose
昨天
0
0
Android中的设计模式之抽象工厂模式

参考 《设计模式解析》 第十一章 Abstract Factory模式 《设计模式:可复用面向对象软件的基础 》3.1 Abstract Factory 抽象工厂 对象创建型模式 《Android源码设计模式解析与实战》第6章 创...

newtrek
昨天
0
0
Redis | 地理空间(GEO)的一个坑

Redis的地理空间(Geo)是个好东西,轻轻松松的就可以把地图描点的问题处理了, 最近却遇到一个坑...Redis采用的Msater-Slave模式, 运用GEORADIUS在salve读取对应的数据,新增了从节点但是从不返...

云迹
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部