代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script>

        function changeImg() {

            var img = document.getElementById("img1");

            img.src = "https://i03piccdn.sogoucdn.com/1ce429cb207df745";

        }

    </script>

</head>

<body>

<input type="button" value="点击切换图片" onclick="changeImg()"/>

<br/>

<img src="https://i01piccdn.sogoucdn.com/d5d909ee8ce5249d" id="img1"/>

</body>

</html>

JS练习：切换图片的更多相关文章

  1. js多种切换图片

    分享通过js实现多种图片切换特效,这里只有手动切换哦,自动效果需自写,效果地址:http://dwz.cn/1drD5u. 下载地址:http://***/download/index/52209 适 ...

  2. js自动切换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js 循环切换图片

    function changeLot(){ var minIndex = 1; var maxIndex = 100; var curIndex = 10; var src = $("ul ...

  4. js动态切换图片

    <script language =javascript > $(function () { initAds(); }); function initAds() { var curInde ...

  5. js 数组切换图片

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  6. js 上下切换图片

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  7. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  8. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

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

  9. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

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

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

随机推荐

  1. Web Tab, Project Properties

    https://msdn.microsoft.com/en-us/library/aa983445(v=vs.100).aspx The Web tab of the project Properti ...

  2. [LeetCode] Unique Binary Search Tree

    Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...

  3. loj 101 最大流

    冬令营送到我脸上的20分都没拿全 心态爆炸 冬令营前一天学的dinic 后一天才发出来 #include<iostream> #include<cstdio> #include ...

  4. Java中static final 与 final 的区别（转载）

    转自:http://advance0683.iteye.com/blog/1107732 Java中static final 与 final 的区别: 例子: Java代码 import java.u ...

  5. PCB MS SQL 存储过程(CLR) 实现Json转DataTable表的方法

    一.准备需转为DataTable的json字符串 原json字符串数据 [{"TechName":"ECN","TechNo":" ...

  6. [Swift通天遁地]七、数据与安全-(14)使用单元测试进行邮箱格式的验证

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  7. Sara Cope关于text-shadow的介绍

    作者:Sara Cope p { text-shadow: 1px 1px 1px #000; } 你可以通过逗号“,”应用多个文本阴影. p { text-shadow: 1px 1px 1px # ...

  8. Prime Ring Problem -- 第一个真正意义上的 搜索

    这个搜索............搜的我头都大了.......不过还是 懂了那么一点点...哈哈 从3/7晚上  做到3/8晚上------从女生到妇女  我都用来做着一道题了......... 所谓的 ...

  9. ASP.NET MVC5 之 Log4Net 的学习和使用

    最近在学习 log4Net 插件,在博客园找到了好多资料,但是实现起来还是有点麻烦. 现在记录下学习的过程,期间可能加载着借鉴和转载的代码. 1.配置文件的设置: 新建config文件夹下 log4n ...

  10. python中的深拷贝和浅拷贝（面试题）

    一.浅拷贝 定义:浅拷贝只是对另外一个变量的内存地址的拷贝,这两个变量指向同一个内存地址的变量值. 浅拷贝的特点: 公用一个值: 这两个变量的内存地址一样: 对其中一个变量的值改变,另外一个变量的值也 ...