<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. web.config中httpModules和Modules的区别

    最近用到了mvc的 Modules管道时,发现web.config中有两个modules 1.system.web节点下的httpModules 2.system.webServer节点下的modul ...

  2. JS总结之二：DOM对象控制HTML

    DOM对象控制HTML 1.方法 getElementsByName( ) ——获取name getElementsByTagName( ) ——获取元素 getAttribute( ) ——获取元素 ...

  3. hdu_5293_Tree chain problem(DFS序+树形DP+LCA)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5293 被这题打蹦了,看着题解写的,很是爆炸,确实想不到,我用的DFS序+LCA+树形DP,当然也可以写 ...

  4. Storm官方文档翻译之创建Storm项目

    本文将讲述如何在开发环境创建一个Storm项目,下面是步骤: 1.将Storm的相关jar包添加到classpath中: 2.如果使用多语言开发,也要将多语言目录添加到classpath; 点击sto ...

  5. DLL调试方法

    1.已经做好的dll不能设置:你可以用AfxMessageBox把信息打印出来.2.哪个地方调用的函数 把DLL重新编译一次 在把DLL放到工程里 从新添加一下 然后在你工程调用DLL内容的地方设置断 ...

  6. android网络编程之HttpUrlConnection的讲解--DownLoadManager基本用法

    1.DownLoadManager是Android用系统服务(Service)的方式来优化处理长时间的下载操作的一个工具类.避免了我们去处理多线程,通知栏等等. 2.不要忘记添加权限 <uses ...

  7. oracle的exp和imp命令的使用【转载】

    oracle的exp和imp命令的使用     我们通常要对ORACLE的数据进行导入,导出,在没有expdb,impdb以前(10G以前),我们都是使用exp 导出,imp命令来实现导入.   打开 ...

  8. 如何从Apache官网下载apache

    apache服务器官网地址:http://httpd.apache.org/ linux版本下载比较容易,以windows版本,apache 2.4为例. 点击download 此处随便选一个提供商. ...

  9. Mac上安装Tomcat

    参考文档:http://blog.csdn.net/j2ee_me/article/details/7928493 0.如果java没有被初始安装,所以你要自己去找Apple的安装程序这里来安装,或者 ...

  10. hover带有动画效果的导航

    html,body{overflow-x:hidden;} ul,li{list-style: none;} .nav{width:100%; height: 26px; overflow: hidd ...