JS更换图片

最新推荐文章于 2023-06-10 23:12:34 发布
最新推荐文章于 2023-06-10 23:12:34 发布
阅读量7.8k 收藏 2
点赞数 3
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linlin2294592017/article/details/8809892
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
     // 方法一（麻烦）
        function put() {
            var len = document.getElementsByName('RA');
            for (var i = 0; i < len.length; i++) {
                if (len[i].checked == true) {
                    var a = len[i].getAttribute('value');
                switch (a){
                    case '1':
                        document.getElementById('img1').setAttribute('src', 'images/1.jpg');
                        break;
                    case '2':
                        document.getElementById('img1').setAttribute('src', 'images/2.jpg');
                        break;
                    case '3':
                        document.getElementById('img1').setAttribute('src', 'images/3.jpg');
                        break;
                    default:
                        document.getElementById('img1').setAttribute('src', 'images/4.jpg');
                        break;
                    }
                }
            }
    }


    //方法二（简单）
    function UpdateImg(radio) {
        //简写方式
        //document.getElementById('img1').setAttribute('src', 'images/' + radio.getAttribute('value') + '.jpg');
        var numb = radio.getAttribute('value'); //获取被选中的单选按钮的value值
        document.getElementById('img1').setAttribute('src', numb); //设置要加载的图片


    }
    </script>
</head>
<body>
<img id="img1" src="images/9.jpg" width="200px" height="200px" />
<br />
    <!--方法一-->
    <input id="Radio1" type="radio" name="RA" οnclick="put();" value="1" />忧伤的小狗
    <input id="Radio2" type="radio" name="RA" οnclick="put();" value="2" />卖萌的小狗
    <input id="Radio3" type="radio" name="RA" οnclick="put();" value="3" />愤怒的小狗
    <input id="Radio4" type="radio" name="RA" οnclick="put();" value="4" />可爱的小猫
    <br />
    <!--方法二-->
    <input id="Radio5" type="radio" name="RB" οnclick="UpdateImg(this);" value="images/1.jpg" />忧伤的小狗
    <input id="Radio6" type="radio" name="RB" οnclick="UpdateImg(this);" value="images/2.jpg" />卖萌的小狗
    <input id="Radio7" type="radio" name="RB" οnclick="UpdateImg(this);" value="images/3.jpg" />愤怒的小狗
    <input id="Radio8" type="radio" name="RB" οnclick="UpdateImg(this);" value="images/4.jpg" />可爱的小猫
</body>

</html>

开始界面，默认一张图片


点击忧伤的小狗图片更换

Dlinlin
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS点击更换图片
m0_62049523的博客
10-08 1267
JS点击更换图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
JavaScript图片替换
10-28
此为JavaScript图片替换的网页，可从中获得图片替换的源代码
javascript/js匹配和图片的相互替换
月影WEB的博客
04-18 1813
我们先看看JS代码和效果图 代码如下： 按F12预览效果图如下： 点击“灯泡”，“灯泡”的关闭和打开会进行切换，从而达到图片切换的目的！ 下面我们来讲解下这个JS： JS部分： <script> function yue()//申明一个JS方法叫yue() { var x=document.getElementById("yueying");//获取文档中id为yueying的标签 if(x.src.match("ima...
vue2加element-ui加nodejs实现图片上传和修改图片到数据库
最新发布
m0_72190449的博客
06-10 2460
记录一下在做项目过程中实现图片保存到数据库，并且可以修改图片的功能先来说说怎么简单实现图片上传到服务器这个功能文件夹摆放先在app文件夹的创建index.js，在其中定义一个路由（为了更好的模块化处理，直接用app.post也行）然后在router文件夹中创建一个images.js其中代码如下其中代码中有设置文件存储路径dest: "public/images"，这个文件夹你可以先创建也可以不创建，他会自动帮你创建，他接收的图片会在app文件夹中显示出来，如果报错没有此文件夹，你可以先创建。
Js图片替换案例
cgl_dong的博客
05-22 3041
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .div1{ width:600px; height:300px; border:5px solid green; ...
Js实战之实现图片的切换
weixin_44278828的博客
10-06 8827
实现图片间的切换 代码的主要思路： 1、先给“下一张”和“上一张”两个按钮绑定单击响应事件； 2、获取img标签对象，用于修改src属性的值，实现图片的切换； 3、切换图片实质上就是修改img标签里面src属性的值； 4、创建一个数组用来保存图片，这样的话，在图片切换的过程中操作起来会更加方便，只要操作数组的索引即可，如要切换到下一张，将imgArr[0]---->imgArr[1]，即可； 5、创建一个变量用来保存当前正在显示的图片的索引，这样操作图片更加简单； 6、需要注意的是，如果当前显示的图片
js 实现图片切换（最简单）
m0_69319329的博客
10-16 1803
实现：图片切换。
JavaScript通过select动态更换图片的方法
10-24
主要介绍了JavaScript通过select动态更换图片的方法,涉及javascript动态操作图片src的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript实现更换背景图片
10-16
主要为大家详细介绍了JavaScript实现更换背景图片,文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
图片更换（轻量）js
04-26
因为网上的js图片更换轮播插件好繁啊，我就自己写了个，就一个函数而已，15行代码的样子，只不过功能简单，就是到一定的时间换图片。
JS网页点击图片更换背景
11-17
使用JavaScript制作一个简单的网页，网页内部有四个小图片，点击不同的图片介意更换页面的背景。
使用JS实现图片切换
m0_61505372的博客
11-18 1437
很多时候要嵌入简单方便的代码，我为大家提供了一种方法——图片切换
Fabric.js 更换图片的3种方法（包括更换分组内的图片，以及存在缓存的情况）
weixin_39415598的博客
01-14 4032
本文简介 我列举了3种在 Fabric.js 中 更换图片 的方法。 其中还包括 更换组内图片 的操作。 环境和版本 Chrome浏览器版本：96.0.4664.45 Fabric.js版本：4.6.0 我是在原生环境下开发的，同时也提供了一份 Vue3 环境下开发的代码（文末有链接）。 动手操作 接下来有3个案例，使用了2张图片 Agumon.png 和 Bhikkhu.png，图片是在 iconfont 网站上找到的。 如果需要使用本案例的图片，可以在文末提供的仓库中获取。 情景
js通过获取id和name改变图片
weixin_34341117的博客
11-01 779
<html> <head> <scripttype="text/javascript"> <!-- functionone(){ document.getElementById('ok').style.background='url(http://d.lanrentuku.com...
js切换图片
oxygensunshine的博客
11-02 1423
js切换图片
利用JS实现图片切换
热门推荐
dweblover的博客
11-19 4万+
事件举例: 1.要求实现效果：当鼠标悬停在照片上时更换为另一张照片；当鼠标离开时，还原为本来的图片。 说明： 1.一般来说对于一个事件问题处理起来分为三个步骤： （1）获取事件 （2）绑定事件 （3）书写事件驱动程序 代码如下 &amp;lt;!doctype html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&q
Js实现背景图片切换
wuliao193728645的博客
04-10 6557
实现目标： 点击页面中间的小图片，页面的背景就会变成相应的图片样式 思路 点击图片，获取到对应的图片的li元素 因为图片的名字是从1开始顺序命名的，所以可以通过获取的li元素的索引号来改变背景图片的地址名 将地址名改到body标签的backgroundImage属性中 实现代码 html代码 Css代码 Js代码 ...
JavaScript：点击图片后更换图片
weixin_43203591的博客
08-12 6319
背景 单击图片实现更换图片。本例中代码实现单击图片后交替显示两张图片。 实现 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>灯泡</title> </head> <body> <img id = "pic" src = "on.png"> <!--此处应注意图片位置，确保图片在当前
JS实现点击按钮更换图片
05-31
可以使用以下 JavaScript 代码实现： ```html <!DOCTYPE html> <html> <head> <title>更换图片</title> <script> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("pic1")) { image.src = "pic2.jpg"; } else { image.src = "pic1.jpg"; } } </script> </head> <body> <img id="myImage" src="pic1.jpg" width="200" height="200"> <br> <button onclick="changeImage()">更换图片</button> </body> </html> ``` 其中，`changeImage()` 函数用于更换图片。首先，通过 `document.getElementById()` 方法获取到 `id` 为 `myImage` 的图片元素；然后，通过 `image.src.match()` 方法来判断当前显示的图片是否为 `pic1.jpg`，如果是，则更换为 `pic2.jpg`，否则更换为 `pic1.jpg`。最后，更新图片的 `src` 属性，显示更换后的图片。在 HTML 中，通过 `<button>` 标签来创建一个按钮，并将 `onclick` 事件绑定到 `changeImage()` 函数上，当用户点击按钮时，就会触发 `changeImage()` 函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值