js实现图片自动切换效果。
js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼。
<script language="javascript">
setInterval(test, 2000);
var array = new Array();
var index = 0;
var array = new Array("../../Content/images/3s1hj_kqzew4k2ozbhs2dwgfjeg5sckzsew_780x520.jpg", "../../Content/images/3s1hj_kqzewqs2ozbhsrdwgfjeg5sckzsew_450x600.jpg", "../../Content/images/3s1hj_kqzfc4leozbhmtcugfjeg5sckzsew_650x975.jpg");
function test() {
var myimg = document.getElementById("imgs");
if (index == array.length - 1)
{ index = 0; } else { index++; }
myimg.src = array[index];
}
</script> 在页面需要的地方添加这个:
↓
↓
↓
<img style="width:200px; height:200px" id="imgs" src="../../Content/images/3s1hj_kqzdoqs2ozbhsq3wgfjeg5sckzsew_450x600.jpg" />
js实现图片自动切换效果。的更多相关文章
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- tab切换效果 网站中的图片自动切换
网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...
- 基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- jquery 图片自动切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS实现图片翻书效果示例代码
js 图片翻书效果. picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- JS实现图片翻书效果
picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http- ...
- 原生JS—实现图片循环切换的两种方法
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
- 原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...
- 原生JS实现图片循环切换
<!-- <!DOCTYPE html> <html> <head> <title>原生JS实现图片循环切换 —— 方法一</title&g ...
随机推荐
- 2016 年开发者应该掌握的十个 Postgres 技巧
[编者按]作为一款开源的对象-关系数据库,Postgres 一直得到许多开发者喜爱.近日,Postgres 正式发布了9.5版本,该版本进行了大量的修复和功能改进.而本文将分享10个 Postgres ...
- 【 UVALive - 4287】Proving Equivalences (SCC缩点)
题意: 给出N个命题,要求你证明这N个命题的等价性 比如有4个命题a,b,c,d,我们证明a<->b, b<->c,c<->d,每次证明都是双向的,因此一共用了6次 ...
- 了解 Windows Azure 存储计费 – 带宽、事务和容量
我们收到关于如何估算 Windows Azure存储成本,以便了解如何更好地构建一个经济有效的应用程序的问题.在本文中,我们将从带宽.事务和容量这三种存储成本的角度探讨这一问题. 使用 Wind ...
- nginx+tomcat配置https
nginx代理https后,应用redirect https变成http,很多页面报404.情况类似http://blog.sina.com.cn/s/blog_56d8ea900101hlhv.ht ...
- haproxy实现mysql slave负载均衡
简单画一个图: 一.服务器规划 192.168.116.132 (master) -->写操作 192.168.116.129 (slave1) -->读操作 192.168.116. ...
- Google Map API学习1
这一段时间公司一个新产品上线, 做超市代购的 这样,就需要计算每个门店也就是超市,距离小区之间的距离. 我们用的是Google Map 1.批量对地址进行编码,也就是将地址批量转化成对应的Goole ...
- NIOS中双CPU系统的构建
首先构建SOPC系统,先分别添加两个CPU,分别命名为CPU1和CPU2,设置如下图,其中CPU1运行VGA的乒乓游戏,CPU2运行音乐,这里为了简单,音乐用LED来表示. 这里CPU1选择是中等容量 ...
- 在Ant Build文件中使用正则表达式替换文件内容
这需要在build文件中使用<replaceregexp>标签, 这个标签的使用大概是这个样子的: <replaceregexp file="${src}/build.pr ...
- JavaScript高级程序设计17.pdf
导航和打开窗口 使用window.open()方法可以导航到一个特定的URL也可以打开一个新的浏览器窗口,接收4个参数:要加载的URL.窗口目标.特性字符串和一个表示新页面是否取代浏览器历史记录中当前 ...
- 转 :hdoj 4857 逃生【反向拓扑】
逃生 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...