文档章节

用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

没有更多内容

加载失败,请刷新页面

加载更多

Android JNI 开发系列(九)JNI调用Java的静态方法&实例方法

JNI调用Java的静态方法&实例方法 package org.professor.jni.bean;import android.util.Log;/** * Created by peng on 2018/10/11. */ public class Person { /*C/CPP 调用......

蔡小鹏
27分钟前
3
0
Flink 原理与实现:Window 机制

Flink 认为 Batch 是 Streaming 的一个特例,所以 Flink 底层引擎是一个流式引擎,在上面实现了流处理和批处理。而窗口(window)就是从 Streaming 到 Batch 的一个桥梁。Flink 提供了非常完...

xtof
29分钟前
1
0
Fabric.js高级点的教程2--添加表格的方法

有时候我们先在画布上画一个表格类似一下设计软件那种。一方面作为参考线,一方面给人一直专业的赶脚。。。 先贴上一段网上(不是我写的)可以运行的代码 https://codepen.io/rodan8888/pen/e...

xmqywx
30分钟前
1
0
Java中Lambda表达式的使用

Java中Lambda表达式的使用 简介 (译者注:虽然看着很先进,其实Lambda表达式的本质只是一个"语法糖",由编译器推断并帮你转换包装为常规的代码,因此你可以使用更少的代码来实现同样的功能。本人...

DemonsI
33分钟前
2
0
深入理解Java中停止线程

一.停止线程会带来什么? 对于单线程中,停止单线程就是直接使用关键字return或者break,但是在停止多线程时是让线程在完成任务前去开启另外一条线程,必须放弃当前任务,而这个过程是不可预...

Ala6
42分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部