<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. rm删除文件时排除特定文件

    删除当前目录下所有的*.txt文件,但除了test.txt文件: rm `ls *.txt | grep -v test.txt` 或者 rm `ls *.txt | egrep -v test.tx ...

  2. opewrt上传文件

    设备上运行的openwrt,当tftp和ftp都无法使用时,可以使用命令scp在两台linux设备上copy文件. 当设备启动起来后,输入命令: scp hbg@192.168.2.32:/home/ ...

  3. LeetCode OJ 104. Maximum Depth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  4. SharePoint2013 Set Value To PeoplePicker

    var columnName = 'Display Name';var userName = 'domain\\name';var searchText = RegExp("FieldNam ...

  5. Python之路：爬虫之urllib库的基本使用和高级使用

    关于爬虫自己一直在看,所以时间太慢,这才第二更,有等不及的小伙伴可以慢慢的品尝了,在看下面的之前,建议先把上一章看一下.以下是关于python的Urllib的基础和高级用法. 1.如何扒下一个网站,用 ...

  6. python常用操作

    1.进入python命令行: #python >>>... 退出python命令行 >>>exit() #... 2.运行1.py 直接运行1.py: #pytho ...

  7. Git如何删除版本库中的一个提交?

     如果不小心增加了一个最新的提交,可以通过以下的操作删除,记住:是删除最新的提交,如果回滚到其他的提交上面,就会导致之后的全部消失. 1.git reset --hard HEAD~1    2.gi ...

  8. PHP中json序列化后中文的编码显示问题

    在接口返回数据中,我们经常会返回json或者xml格式,php的json序列化函数json_encode非常好用,但是默认会把中文编码为ASCII码(注意,很多人认为这是乱码,其实不是),尤其在调试接 ...

  9. OpenGL----绘制立方体,定点数组与顶点缓冲

    ,立方体是很简单,但是这里只是拿立方体做一个例子,来说明OpenGL在绘制方法上的改进.从原始一点的办法开始一个立方体有六个面,每个面是一个正方形,好,绘制六个正方形就可以了. glBegin(GL_ ...

  10. Hibernate 系列教程1-枚举单例类

    你还在为不知道怎样正确使用Hibernate而纠结吗 你还在为不知道怎样配置映射文件而郁闷吗 枚举单例(Enum Singleton) 是实现单例模式的一种方式而已,不过写法简单,创建枚举默认也是线程 ...