点击按钮切换图片

最新推荐文章于 2023-08-21 13:55:36 发布
最新推荐文章于 2023-08-21 13:55:36 发布
阅读量477 收藏
点赞数 1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-1.11.0.min.js.js"></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("#img1")[0].style.display="block";
                    $("#img2")[0].style.display="none";
                    $("#img3")[0].style.display="none";
                })
                $("#btn2").click(function(){
                    $("#img2")[0].style.display="block";
                    $("#img1")[0].style.display="none";
                    $("#img3")[0].style.display="none";
                })
                $("#btn3").click(function(){
                    $("#img3")[0].style.display="block";
                    $("#img2")[0].style.display="none";
                    $("#img1")[0].style.display="none";
                })
            })
        </script>
        <style>
            #btn1:active{
                background-color: red;
            }
            #btn2:active{
                background-color: red;
            }
            #btn3:active{
                background-color: red;
            }
        </style>
        
    </head>
    <body>
        <img src="img/aa.jpg" id="img1" style="display: none;" width="200px" height="200px" />
        <img src="img/bb.jpg" id="img2" style="display: none;" width="200px" height="200px" />
        <img src="img/cc.jpg" id="img3" style="display: none;" width="200px" height="200px" />
        <input type="button" id="btn1" name="btn1" value="按钮1"/>
        <input type="button" id="btn2" name="btn2" value="按钮2"/>
        <input type="button" id="btn3" name="btn3" value="按钮3"/>
    </body>
</html>

忙着写BUG
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用js实现点击切换图片
IM_GOOD的博客
03-16 1515
【代码】使用js实现点击切换图片。
html+js实现切换图片（点击按钮切换）
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-02 1万+
效果图 实现点击按钮切换图片的效果 具体代码 <!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-sca..
前端技术-(图片切换)
xxj123_的博客
08-21 1743
前言：图片切换是前端页面十分常见的技术，主要是应用在首页的数据展示，并且会具有很多不同的切换的切换效果十分的炫酷。虽然有很多的已经封装好的效果提供使用，但是理解最基础的原理的还是一些必要。点击切换按钮，可以切换图片。这里实现的原理，设置一个index作为图片的下标，点击下一张的时候将index++，就可以实现图片的切换。提示：一般情况下的在图片上会有小圆点，提供点击来实现图片之间的切换。图片切换最核心的原理，就是图片的将图片放在数组里面，操作图片数组的下标。逻辑：当点击按钮的时候，下面的小图片也需要切换。
JavaScript笔记-点击切换图片
IT1995的博客
05-23 929
最近（2022-03-25）想做个导航页。 涉及这个知识点，在此记录下，实现的效果如下： 点击那个百度后，会切换： 关键代码如下： 图片相关的html代码： <div id="engine-logo" class="search-logo my-2"> <img id="searchLogo" style="width: 220px; height:80px;" alt="搜索引擎Logo" onclick="changePic()" src="img/baidu
原生js实现点击“上一张”、“下一张”按钮切换图片
在热爱技术的路上一直前行。
02-26 4313
目录结构： 代码： <!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实现点击按钮切换图片
12-06
在JavaScript编程中，实现点击按钮切换图片是一种常见的交互效果，主要应用于网页动态展示。本文将详细解析如何通过JavaScript实现这个功能。 首先，我们需要创建HTML结构，包括一个包含图片的`<div>`容器、一个...
js点击按钮切换图片(完整源码)
05-24
在JavaScript编程中，点击按钮切换图片是一种常见的交互效果，它能增强用户界面的动态感，提升用户体验。这个“js点击按钮切换图片”示例提供了一套完整的源代码，旨在帮助前端开发人员，尤其是那些拥有1-3年工作...
点击按钮切换图片.html
09-26
点击按钮切换图片.html
js点击按钮切换图片、jQuery自适应浏览器图片切换代码.zip
02-21
js点击按钮切换图片 demo预览效果：http://124.223.118.176/jsImgChangeDemo/ 脚本简介：jQuery自适应浏览器图片切换代码是一款全屏banner图片滚动切换特效下载。 目录文件： 1.css 2.js 3.images 4.index.html 源码...
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
10-23
今天主要给大家分享一段js和css代码组合实现鼠标点击按钮图片切换，图片自动切换，点击左右按钮图片切换三种效果，代码非常简单，需要的朋友一起来学习吧
点击图片进行切换
mantou_riji的博客
04-12 935
实现效果：图片点击切换 代码： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../reset.css"> <style> .img-list{ width: 480px; height: 850px;
css 简单的点击按钮更换展示的图片
yedaiyang的博客
11-30 9326
//设置一张图片    //设置控件   1   2   3 //调用js    //查找控件并且赋于值    var but1 = document.getElementById("but1");    var but2 = document.getElementById("but2");    var but3 = document.getElementById("b
选项卡切换效果，点击切换图片
^Being^
12-08 2890
今天分享一篇前端开发实战当中经常使用到的选项卡切换效果，希望对您有所帮助，欢迎留言探讨。 1、html结构布局： &amp;lt;div id=&quot;box&quot;&amp;gt; &amp;lt;div class=&quot;img&quot;&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li class=&quot;acti
13点击按钮切换图片
dinggu6579的博客
08-28 79
<input type="button" id="btn11"> <img src="../logo3.png" id="imm"> <script type="text/javascript"> function my$(id) { return do...
点击某个按钮切换图片（按钮颜色跟着改变）
erdouzhang
07-07 7487
html：<div id="pic"> <img src="img/1.jpg" alt=""> <span>数量正在加载...</span> <p>文字正在加载...</p> <ul></ul> </div>css：body {background-color: #333;} ul {padding: 0;margin: 0;} li {list-style: no
ImageButton单击切换图片效果
嵌入式Developer_小J的天空
05-12 1万+
转载请标明： http://blog.csdn.net/u012637501     我们平时在使用手机app时，常常会发现当我们按下某个按钮时相应按钮会发生变化，当我们松手时又恢复了原来的样子。或是，当你连续单击同一个按钮，会实现不同的功能。刚开始的时候感觉很神奇，那么现在我们来揭开她的面纱，经过下面的学习我相信你也可以轻轻松松将其拿下！     一、单击效果     首先看下将要
js点击按钮切换图片
最新发布
09-25
要通过JavaScript点击按钮切换图片，可以按照以下步骤进行操作： 1. 首先，获取按钮对象和img标签的属性。可以使用`getElementById`方法获取按钮对象，使用`getElementsByTagName`方法获取img标签对象。 2. 接着，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值