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实现图片自动切换效果。的更多相关文章

  1. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  2. tab切换效果 网站中的图片自动切换

    网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...

  3. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  4. jquery 图片自动切换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS实现图片翻书效果示例代码

    js 图片翻书效果.  picture.html  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  ...

  6. JS实现图片翻书效果

    picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http- ...

  7. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  8. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  9. 原生JS实现图片循环切换

    <!-- <!DOCTYPE html> <html> <head> <title>原生JS实现图片循环切换 —— 方法一</title&g ...

随机推荐

  1. HTTP-304 NOT Modified

    http://www.douban.com/note/161120791/ http://blog.sina.com.cn/s/blog_4c98b9600100jd4z.html http://ww ...

  2. 【UVA11478】Halum (最短路解差分约束)

    题目: Sample Input2 11 2 102 11 2 -103 31 2 42 3 23 1 54 52 3 44 2 53 4 23 1 01 2 -1Sample OutputInfin ...

  3. 使用mysql-proxy代理实现msyql数据库读写分离

    要实现读写分离,可以先看看如何实现mysql数据库主从:http://www.cnblogs.com/sustudy/p/4174189.html mysql-proxy下载地址(要看好对应版本):h ...

  4. Google+ 技巧四则

    玩Google+也有一段时间了,尽管需要一些特殊的手段(比如修改hosts)才能访问,尽管存在不实名可能会被删除账户的风险,但不得不说,Google+ 的确“有点意思”.同时,看了很多关于Google ...

  5. DUILIB创建不规则窗体,自定义控件(很不错的几十篇文章)

    http://blog.csdn.net/harvic880925/article/details/8925650 http://blog.csdn.net/harvic880925/article/ ...

  6. Weblogic8.1 的性能优化

    注:在下面做的介绍都是以Weblogic8.1为例的,其它版本的Weblogic可能会有些许不同. 1) 设置JAVA参数: a) 编辑Weblogic Server启动脚本文件: BEA_HOMEu ...

  7. java学习面向对象之抽象类

    什么是抽象类,之所以说抽象就是具体的反义词喽~抽象离我们最近的距离也就是初中的时候学过的美术课,抽象画派.拿一桶画彩就这么往画布上一泼,那就是抽象.那么java世界当中什么是抽象呢?我们再拿动物还有狗 ...

  8. Android应用连接代理服务器状况监测解决

    最近项目里面有这样一个需求,由于项目涉密需要连接VPN通过网址映射去登录内部服务器,而且要通知客户vpn的连接状态.网上有许多类似的连接VPN的解决方案,我也尝试了很多种,下面先列出一种比较靠谱的方式 ...

  9. MYSQL删除以数字开头的字段

    例子: // 删除以0开头的字段 DELETE FROM `week_energy_copy` WHERE openid like '0%'; // 删除以数字开头的字段 DELETE FROM `w ...

  10. (转载)[MySQL技巧]INSERT INTO… ON DUPLICATE KEY UPDATE

    (转载)http://blog.zol.com.cn/2299/article_2298921.html MySQL 自4.1版以后开始支持INSERT … ON DUPLICATE KEY UPDA ...