JavaScript实现单击切换图片

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><img id="light" src="data:images/timg.gif"><script>/**1.获取图片对象2.绑定单击事件3.每次单击切换图片规则：如果是1 切换图片为2如果是2，切换图片为1使用标记flag完成*/// 1.获取图片对象var light=document.getElementById("light");var flag=false;//代表为图1状态//2.绑定单击事件light.onclick=function(){//定义匿名方法if(flag){//判断如果是图2，则换图1;light.src="data:images/timg.gif";flag=false;}else{//反之light.src="data:images/timg2.gif";flag=true;}}
</script>
</body>
</html>

JavaScript实现单击切换图片相关推荐

javascript动画系列 —— 切换图片（原生）
在代码里详细注解了,这里就不再赘诉了. (function(window){var m$ = function(){function getId(id){return document.getElem ...
JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）...
在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...
【JavaScript】修改图片src属性切换图片
今天做项目时其中一个环节需要用到js修改图片src属性切换图片,现在来记录一下以下是示例: html <img src="/before.jpg" id="img ...
ImageButton单击切换按钮图片
有时单击ImageButton图片按钮时需要获取变换图片的效果,在这里介绍两种方法仅供参考正常显示点击切换方法一:通过给按钮配置XML文件来实现图片按钮的背景切换效果在layout或者是dra ...
android怎么点击换图片,ImageButton单击切换按钮图片
有时单击ImageButton图片按钮时需要获取变换图片的效果,在这里介绍两种方法仅供参考正常显示点击切换方法一:通过给按钮配置XML文件来实现图片按钮的背景切换效果在layout或者是dra ...
JavaScript练习--[使用js语言实现网页切换图片的效果]
图片切换效果需求; (1)在网页中设计图片的切换效果;打开网页时,只能看到图片; (2)当鼠标移到图片上时,两个按钮就会显示出来; (3)当鼠标点击上;就会切换到上一张图片;点击下;就会切换到下一张图 ...
JavaScript实现京东轮播图效果——自动轮播，左右按钮切换图片，小圆圈跟随图片变化，点击小圆圈可跳转图片，无缝循环播放
JavaScript实现京东轮播图效果--自动轮播,左右按钮切换图片,小圆圈跟随图片变化,点击小圆圈可跳转图片,无缝循环播放静态效果图如下: CSS部分 *{margin: 0;padding: 0 ...
【JavaScript】js可以直接使用的鼠标经过切换图片
js实现简单的鼠标经过切换图片,鼠标移出图片还原. 代码如下 <!DOCTYPE html> <html lang="en"> <head>&l ...
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...

JavaScript实现单击切换图片

JavaScript实现单击切换图片相关推荐

最新文章

热门文章