<html><head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/img_01.jpg">
<p></p>
<button onclick="switchImg();">切换图片</button>
<script>
// 拿到图片标签
var img = window.document.getElementsByTagName('img')[];
console.log(img.src.lastIndexOf('img_01.jpg'));
// lastIndexOf 如果找到则返回一个任意正数,如果没有找到,则返回-1
// indexOf
function switchImg(){
if(img.src.indexOf('img_01.jpg') != -){
img.src = 'img/img_02.jpg';
}else{
img.src = 'img/img_01.jpg';
}
} </script> </body></html>

js 切换图片的更多相关文章

  1. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  2. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

  3. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  4. jquery实现图片切换和js实现图片切换

    jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  5. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  6. JS解决通过按钮切换图片的问题

    我是JS初学者,本想通过JS解决轮播图的特效,上网看了下:大部分都是JQ解决的,对于初学者的我来说理解上有点困难.于是我自己只做了一个不那么高大上的JS轮播图,下面我简单介绍下我的步骤:在HTML中创 ...

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

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

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

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

  9. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

随机推荐

  1. js+jquery的等价用法

    js: 获取属性的值: document.getElementById("id").value; 设置属性的样式: document.getElementById("id ...

  2. 【译】用jQuery 处理XML--浏览器中的XML与JavaScript

    用jQuery 处理XML--写在前面的话 用jQuery 处理XML-- DOM(文本对象模型)简介 用jQuery 处理XML--浏览器中的XML与JavaScript 用jQuery 处理XML ...

  3. [Everyday Mathematics]20150109

    设 $A$ 是 $n$ 阶复方阵, 其特征多项式为 $$\bex f(\lm)=(\lm-\lm_1)^{n_1}\cdots(x-\lm_s)^{n_s}, \eex$$ 其中 $\lm_i$ 互不 ...

  4. 97. Interleaving String

    题目: Given s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For example,Given: ...

  5. vs 2010 Cannot find or open the PDB file

    打开VS2010:工具-->选项-->>调试-->符号接下来就是选择Microsoft,然后确认  接着随便编译一个程序,过程会灰常的慢. 看到此目录下符号缓存了吗?C:\Us ...

  6. [转]强大的vim配置文件,让编程更随意

    转自:http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim配置主要有 ...

  7. ibatis中的resultClass,parameterClass,resultMap,resultType的使用与区别

    parameterClass 是参数类.指定了参数的完整类名(包括包路径).可通过别名避免每次重复书写冗长的类名. resultClass 是结果类, 二.resultClass取值 1.result ...

  8. Mongodb 之insert瞬时完成,测试数据---飞天博客

    这几天看mongdb官方网站,然后将执行数据.突然,我发现,该数据确实很强大,在这里说话数据.我用普通的pc机,amd双核 2.7GHz,4G内存,当然,当系统不只是在测试作为数据库server的.同 ...

  9. js面向对象知识点之对象属性 创建对象 总结中

    昨天面试出了一道面试题 本人我做错了 于是痛定思痛 再过一遍面向对象 var name="一体机"; var value="infolist"; //构造函数 ...

  10. MySQL数据库开发的三十六条军规

    一.核心军规 尽量不在数据库做运算,cpu计算的事务必移至业务层; 控制表.行.列数量([控制单张表的数据量 1年/500W条,超出可做分表],[单库表数据量不超过300张] .[单张表的字段个数不超 ...