<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. Chapter 2 Open Book——8

    But as far as I could tell, life worked that way most of the time. 但是即使我这么说,生活大多数时间还是这样的. 但就我所能告诉你的, ...

  2. spark第一篇--简介，应用场景和基本原理

    摘要: spark的优势:(1)图计算,迭代计算(2)交互式查询计算 spark特点:(1)分布式并行计算框架(2)内存计算,不仅数据加载到内存,中间结果也存储内存 为了满足挖掘分析与交互式实时查询的 ...

  3. POJ- Find a multiple -（抽屉原理）

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6452   Accepted: 2809   Special Judge D ...

  4. iOS 的 APP 如何适应 iPhone 5s/6/6Plus 三种屏幕的尺寸？

    初代iPhone 2007年,初代iPhone发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到iPhone 3GS也保持不变. 那时编写iOS的App( ...

  5. jenkins与rebotframework搭配

    一.下载Jenkins 下载地址:http://mirrors.jenkins-ci.org/ 贫道比较推荐下载war包的,进入上面的地址,页面里有war的链接,各种类型各种版本的release,大家 ...

  6. centos精简系统 源码安装客户端git

    CentOS的yum源中git版本比较低,需要最新版本git,只能自己编译安装,现在记录下编译安装的内容,留给自己备忘. 对于精简型的centos系统,会缺少很多依赖包和插件,要源码安装客户端git, ...

  7. PHP之Zip扩展，解压缩文件，ZipArchive类

    <?php $zip = new ZipArchive();//新建一个对象 /* $zip->open这个方法第一个参数表示处理的zip文件名. 第二个参数表示处理模式,ZipArchi ...

  8. 确定当前Python环境中的site-packages目录位置

    引入“搜索路径”这个概念是因为在使用import语句时,当解释器遇到import语句,如果模块在当前的搜索路径就会被导入. 搜索路径是一个解释器会先进行搜索的所有目录的列表. 那么python如何添加 ...

  9. go mode

    https://github.com/dominikh/go-mode.el http://blog.altoros.com/golang-part-1-main-concepts-and-proje ...

  10. Jquery-根据标签的name属性，获取其value值。存入对象并且转换为Json数组

    <li id="testinput" name="testinput" value="1" />分类1:标签1</li&g ...