<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. 转：java.io.IOException: Exceeeded maximum number of redirects: 5 解决版本

    Jmeter运行的时候出现的重定向超过n次的问题: When trying to test a Silverlight application, I get the below error. Has ...

  2. TODO：小程序的使用体验

    TODO:小程序的使用体验 2017.01.09小程序如期而至,话说十年前的今天2007.01.09是第一代iPhone发布日期. 清晨朋友圈发了一张小程序的截图,很多朋友问用什么版本的微信才有小程序 ...

  3. 【01-14】java ThreadLocal工具类

    自定义ThreadLocal package concurrent; import java.util.HashMap; import java.util.Map; /** * @author alo ...

  4. HIT Winter Day ACM入门

    A. Arpa’s hard exam and Mehrdad’s naive cheat 题意:统计1378^n的末尾数字 即统计8^n的末尾数字 n=0时为1 其他情况为{8,4,2,6}中的一个 ...

  5. python解决接口测试获取手机验证码问题

    最近在做接口测试的时候遇到一个问题,就是有个很重要的接口要用到手机短信验证码,而其他接口都依赖于这个验证码,如果没有短信验证码就不能进行下面接口的测试,所以为了定时的验证线上的接口是否正常,而且又不修 ...

  6. VBS获取Ini配置文件一个节点下的所有字段的值

    ''* 功能:使用VBS读取ini文件中指定节点下的所有值'* 输入参数:inipath :ini文件的地址'*           initypes :ini文件中包含在"["和 ...

  7. Eclipse配置--智能补全

    定位到:Windows→Preferences→Java→Editor→Content Assist 将Auto Activation triggers for java的默认值“.”修改为" ...

  8. svnserve: E000098: 不能绑定服务器套接字: 地址已在使用

    百度一下,所有资料都是 1.查找出目前正在使用的svnserve进程,然后kill掉 ps -aux | grep svnserve kill -9  xxx    // xxx代表svnserve对 ...

  9. Storm官方帮助手册翻译(上)

    Storm作为当前最流行的实时计算框架,自Twitter将其开源后就一直备受关注.由于其具有先天的稳定性以及便捷性,目前被许多大公司所采用,国外像雅虎.雅虎日本.Twitter.OOYALA.Spot ...

  10. SQL查询表,表的所有字段名，SQL查询表,表的所有字段名

    SQL查询表,表的所有字段名 2011-07-29 10:21:43|  分类: SQLServer |  标签:表  sql  字段   |举报 |字号 订阅   SQL查询表,表的所有字段名 SQ ...