js中点击按钮切换图片

// 换图片简单方法
//        function updatepic(radio) {
//            document.getElementById('pic1').setAttribute('src', 'image/' + radio.getAttribute('value') + '.jpg');
//        }
        //换图片复杂方法第二种
        function UpdateImg() {
            //document.getElementById('img1').setAttribute('src', 'images/2.jpg');
            var dogandcat = document.getElementsByName('dogandcat'); //获取所有name=dogandcat的单选按钮
            for (var i = 0; i < dogandcat.length; i++) {
                if (dogandcat[i].checked == true) {
                    var value = dogandcat[i].getAttribute('value');
                    switch (value) {
                        case '2':
                            document.getElementById('img1').setAttribute('src', 'images/2.jpg');
                            break;
                        case '3':
                            document.getElementById('img1').setAttribute('src', 'images/3.jpg');
                            break;
                        case '4':
                            document.getElementById('img1').setAttribute('src', 'images/4.jpg');
                            break;
                        case '6':
                            document.getElementById('img1').setAttribute('src', 'images/6.jpg');
                            break;
                    }
                }
            }
        }
    </script>
</head>
<body>

<input type="button" value="换图片" οnclick="updatepic()" />
    <img src="data:image/9.jpg" id='pic1' οnclick="updatepic()"/>
    <input id="Radio1" type="radio" name='dogandcat' value="2" οnclick="updatepic(this)"/>忧伤的小狗
    <input id="Radio2" type="radio" name='dogandcat' value="3" οnclick="updatepic(this)"/>卖萌的小狗
    <input id="Radio3" type="radio" name='dogandcat' value="4" οnclick="updatepic(this)"/>愤怒的小狗
    <input id="Radio4" type="radio" name='dogandcat' value="6" οnclick="updatepic(this)"/>惊讶的小猫

</body>
</html>

js中点击按钮切换图片相关推荐

vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
vue点击按钮怎么跳转图片_Vue中点击按钮切换图片;
页面效果比较差,但是有图总比没图强点这是最开始的页面,我们看到,图中只有一个"右箭头",点击右箭头; 左箭头也有了,然后我们继续点击右箭头; 右箭头没有了,只剩下了左箭头, 以上 ...
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html> <h ...
js中点击按钮时变色，松开后恢复原来的颜色
js中点击按钮时变色,松开后恢复原来的颜色 // class.active{background: #1AB394;}//js<script type="text/javascript ...
Android 点击按钮切换图片
Android 点击按钮切换图片效果如图: 点击后: 主要代码: //切换图片 but1.setBackgroundResource(R.drawable.qq1); 全部代码: public cl ...
Viewer.js点击按钮放大图片用法
1.Viewer.js点击按钮放大图片用法 <div onclick="getHideBig('hide_img_weight1')" id="btn_img_we ...
html点击按钮切换图片代码_SVG创意推文—『点击开窗』教程
嘿,胖友们大家好呀,我是三儿. 好久不见,胖友们有没有想我呀!最近这段时间,各大官媒齐齐出手,朝着SVG创意推文进军.之前人民日报推了一篇<点亮武汉>在当时引起了不小的轰动,三儿也连忙出了 ...
js 点击按钮或者图片，实现图片上传以及将图片显示在页面上
点击图片本身,实现图片上传: 1.html页面 <div class="card">// 用于接受上传的图片<img src="img.jpg&quo ...

js中点击按钮切换图片

js中点击按钮切换图片相关推荐

最新文章

热门文章