代码：

<!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. Linux如何使用cURL分割下载大文件

    Linux如何使用cURL分割下载大文件 - 51CTO.COM http://os.51cto.com/art/201508/489368.htm

  2. 【转】关于使用Android6.0编译程序时，出现getSlotFromBufferLocked: unknown buffer: 0xac0f8650问题的解释

    这个问题是在测试leakCanaryTestDemo时发现的,期初看到有点蒙,这个demo中只使用了一个button和一个textView控件进行测试,按理说是不应该出现这种问题,在 网上查找这个问题 ...

  3. 洛谷P2340 奶牛会展

    题目背景 奶牛想证明它们是聪明而风趣的.为此,贝西筹备了一个奶牛博览会,她已经对N 头奶牛进行 了面试,确定了每头奶牛的智商和情商. 题目描述 贝西有权选择让哪些奶牛参加展览.由于负的智商或情商会造成 ...

  4. Java 输入输出流 （七）

    1.什么是IO Java中I/O操作主要是指使用Java进行输入,输出操作. Java所有的I/O机制都是基于数据流进行输入输出,这些数据流表示了字符或者字节数据的流动序列.Java的I/O流提供了读 ...

  5. git-更改本地和远程分支的名称

    git branch -m old_branch new_branch # Rename branch locally git push origin :old_branch # Delete the ...

  6. Linux系统的整体目录结构和文件解析

    Linux系统目录结构 使用 ls / 查看系统的文件目录: /:根目录,根目录下一般只存放子目录,不存放文件.在linux系统中所有的文件都挂载该目录下. /bin:命令目录. 存放系统的可执行的二 ...

  7. jquery得到焦点和失去焦点

    鼠标在搜索框中点击的时候里面的文字就消失了,经常会用到搜索框的获得焦点和失去焦点的事件,接下来介绍一下具体代码,感兴趣的朋友额可以参考下   input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面 ...

  8. 解决Logger在Android Studio 3.1版本无法正常加载tag格式

    已经升级到Android Studio 3.1的同学可能会发现一个问题, Logcat中如果短时间出现多条日志tag相同, 只会显示第一条日志的tag, 后面的tag会自动隐藏, 这时com.orha ...

  9. 点击文字弹出一个DIV层窗口代码 【或FORM表单 并且获取点击按钮的ID值】

    点击不同按钮咨询不同的 专家 <?php for($i=1;$i<5;$i++){ $uid=$i; //用户ID ?> <a class="a_click" ...

  10. servlet.txt笔记

    javase jdbc ==>java访问数据库html ==>浏览器显示内容,无法把数据提交给后台?==>动态网页技术(servlet)解决前台.后台交互问题动态网页技术:serv ...