精华内容
下载资源
问答
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>... 1. 事件: 点击事件 onclick 2.... 3....// alert("要切换了") var im
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    			/*
    				1. 事件: 点击事件 onclick
    				2. 事件要触发函数: changeImg
    				3. 在函数中
    			*/
    			function changeImg(){
    //				alert("要切换了")
    				var img = document.getElementById("img1");
    				img.src = "../img/1-161104143944.gif";
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="点击切换图片" onclick="changeImg()" />
    		<br />
    		<img src="../img/222.jpg" id="img1" />
    	</body>
    </html>
    
    
    展开全文
  • js 点击按钮切换图片

    2019-10-02 23:21:43
    iframe width="100%" height="300" src="https://jsfiddle.net/zxc886/e2rwv280/1/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe> ...
     
    
    
    <iframe width="100%" height="300" src="https://jsfiddle.net/zxc886/e2rwv280/1/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
    
    

     

     
    
    

       javascript 写的一个点击左右按钮切换图片  以及有图片张数 图片描述 下次做个优化 定时切换图片 

    转载于:https://www.cnblogs.com/2520IT/p/9025804.html

    展开全文
  • 原生js点击按钮切换图片

    千次阅读 2019-04-17 13:15:00
    <!DOCTYPE html><...<head> <meta charset="UTF-8"> <...动态切换图片</title></head><style>ul{ padding:0;margin:0;}li{ list-style: none;} #pic{ po...

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>动态切换图片</title>
    </head>
    <style>
    ul{
    padding:0;margin:0;
    }
    li{
    list-style: none;
    }

    #pic{
    position: relative;
    width: 400px;
    height: 400px;
    background-color:red;
    margin:100px auto;
    background:url('image/1.jpg') no-repeat center;

    }
    #pic img{
    width: 400px;
    height: 400px;
    }
    #pic ul{
    width: 50px;
    position: absolute;
    top: 0;
    right: -70px;

    }
    li{
    width: 40px;
    height: 40px;
    margin-bottom:10px;
    background-color: pink;
    float: left;
    }
    #pic span{

    position: absolute;
    bottom: 10px;
    left: 0;
    }
    #pic p,#pic span{
    width: 400px;
    height: 20px;
    }
    #pic p{
    position: absolute;
    top: 10px;
    left: 0;
    }
    .active{
    background-color: red;
    }

    </style>

    <body>
    <div id="pic">
    <img src="" alt="">
    <p>qwrwe</p>
    <span>werwer</span>
    <ul>
    </ul>
    </div>

    <script>
    window.οnlοad=function(){
    //存放旧li
    var oldLi=null;
    var num=0;
    var oPic = document.getElementById('pic');
    var oImg = oPic.getElementsByTagName('img')[0];
    var oUL = oPic.getElementsByTagName('ul')[0];
    var oSpan= oPic.getElementsByTagName('span')[0];
    var oP = oPic.getElementsByTagName('p')[0];
    var oLi= oUL.getElementsByTagName('li');
    var arr=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg'];
    var aText = ['图片1','图片2','图片3','图片4'];


    for(var i=0;i<arr.length;i++){
    //动态添加元素
    oUL.innerHTML+='<li></li>';
    }
    // 旧li就等于当前的
    oldLi=oLi[num];


    // 初始化
    oImg.src=arr[num];
    oP.innerHTML=num+1+'/'+arr.length;
    oSpan.innerHTML=aText[num];
    oLi[num].className='active';

    for(var i=0;i<arr.length;i++){
    // 给元素自定义属性
    //
    oLi[i].index=i;
    oLi[i].οnclick=function(){
    // 当元素被点击时图片文字信息都一起变化
    oImg.src=arr[this.index];
    oP.innerHTML=1+this.index+'/'+arr.length;
    oSpan.innerHTML=aText[this.index];
    // 清空上一个 当前添加
    oldLi.className='';
    //将上一个给当前
    oldLi=this;
    this.className='active';
    }
    }
    }
    </script>
    </body>
    </html>

     

    实现效果

    转载于:https://www.cnblogs.com/zhizi99/p/10722881.html

    展开全文
  • 今天主要给大家分享一段js和css代码组合实现鼠标点击按钮图片切换图片自动切换点击左右按钮图片切换三种效果,代码非常简单,需要的朋友一起来学习吧
  • js实现点击按钮切换图片功能

    千次阅读 2020-06-11 10:26:52
    点击按钮切换图片 以下是完整代码,直接就可以运行哦~ CSS代码: <style> * { margin: 0; padding: 0; } #box { width: 500px; height: 500px; position: fixed; left: 400px; to

    点击按钮切换图片
    在这里插入图片描述
    以下是完整代码,直接就可以运行哦~

    CSS代码:

     <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            #box {
                width: 500px;
                height: 500px;
                position: fixed;
                left: 400px;
                top: 100px;
            }
    
            ul li {
                width: 150px;
                list-style: none;
                float: left;
                text-align: center;
            }
            li.ac{
                background: #ccc;
            }
    
            ul {
                height: 50px;
                line-height: 50px;
                border: 1px solid #000;
            }
            img{
                width: 500px;
                height: 300px;
                display: none;
            }
            img.ac{
                display: inline;
            }
        </style>
    

    js代码:

    
    <body>
        <div id="box">
            <ul>
                <li class="ac">btn1</li>
                <li>btn2</li>
                <li>btn3</li>
            </ul>
            <div>
                <img class="ac"
                    src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1122594886,303269341&fm=26&gp=0.jpg">
                <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3120983656,3473747240&fm=26&gp=0.jpg">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1551951175,4069157321&fm=26&gp=0.jpg">
            </div>
    
        </div>
    
        <script>
            var btns = document.querySelectorAll("#box li");
            var imgs = document.querySelectorAll("#box img");
    
            for (i = 0; i < btns.length; i++){
                btns[i].index= i;
                btns[i].onclick = function(){
                    for(i = 0; i < btns.length; i++){
                        //先清除所有ac
                        btns[i].classList.remove("ac");
                        imgs[i].classList.remove("ac");
                    }
                    //再给自己加上ac
                    this.classList.add("ac");
                    console.log(this.index);
                    imgs[this.index].classList.add("ac");
                }
            }
        </script>
    </body>
    
    展开全文
  • javascript实现点击按钮切换图片

    千次阅读 2021-01-03 21:32:07
    效果图: 首先搭建基本的结构 ...--默认显示第一张图片--> <img src="img/1.jpg" alt="加载失败" style="width: 800px;height: 400px;"> <button id="pre">上一张</button> <butto
  • 完成图片切换功能 <style> .div{ width: 800px; height: 600px; } .btn{ width: 120px; height: 60px; align-content: center; } .divcss5{margin:0 auto} <...
  • 原生JS实现点击按钮切换图片

    千次阅读 2019-04-18 09:49:57
    动态切换图片 } li{ width: 40px; height: 40px; margin-bottom:10px; background-color: pink; float: left; } #pic span{ position: absolute; bottom: 10px; left: 0; } #pic p,#pic span{ width: 400px; hei....
  • js按钮图片显示,点击按钮切换图片

    千次阅读 2018-06-22 16:09:46
    点击按钮切换图片 $scope.show_all_shedules = function( $event , row_no){      var t = $scope.current_clicked_btn[row_no];  var picts = $event.srcElement || $event.target;  if (!$scope.current_...
  • 今天来分享一下鼠标点击按钮图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码。最后的效果如下:Html代码部分:图片轮播效果制作_赵一鸣随笔博客Css代码部分:*{margin:0px;padding:0px}...
  • JS实现点击button按钮切换图片

    万次阅读 多人点赞 2018-08-10 12:07:14
    JS实现点击button按钮切换图片 放暑假在家打算学习html/css/js制作网页,只有html/css的一些基础。实现效果如图: 这个网页很简单,是用Dreamweaver写的,但是是通过自己做的,算是对JS的一个入门案列。 最初的...
  • js点击按钮切换图片

    万次阅读 2013-04-15 22:00:50
    http://www.w3.org/1999/xhtml">          // 换图片简单方法 // function updatepic(radio) { // document.getElementById('pic1').setAttribute('src', 'image/' +
  • "https://code.jquery.com/jquery-3.1.1.min.js" > type = "text/javascript" > var imgs = [//定义数组用来存储图片的路径 'http://m.beijing.xuefu.com/beijing/img/mcd-index-002xa.png' , '...
  • 实现点击按钮切换图片的效果 具体代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta...
  • js基础【点击按钮 切换图片

    千次阅读 2019-07-08 18:23:13
    //点击循环按钮,flag赋值为1 btn2.onclick = function(){ flag = 1; }   // 焦点跟随 function focusFllow(){ for(var i = 0; i ; i++){ spans[i].style.backgroundColor = "#fff"; } ...
  • 点击按钮切换图片

    千次阅读 2018-04-16 20:22:31
    点击按钮切换图片:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script ...
  • } style> <script type="text/javascript"> window.onload = function(){ /* * 点击按钮切换图片 */ //获取两个按钮 var prev = document.getElementById("prev"); var next = document.getElementById("next"); /*...
  • ">切换图片 <script type="text/javascript"> var i = 1; function changePic(){ var imgst = document.getElementsByTagName("img")[0]; if(i == 1){ imgst.src = "timg.jpg"; i = 2; }else{ ...
  • 目前已经实现点击对应的按钮弹出警示框,想把“弹出警示框”改成“用新的图片替换网页中原有图片”,应该写怎样的JavaScript 代码?求大佬指教!
  • 利用js实现点击按钮切换图片的功能,并且能够记录当前所展示的图片的位置,通过这个练习来巩固一下对DOM中的节点查询和事件绑定的知识。 提示:以下是本篇文章正文内容,下面案例可供参考 一、DOM是什么? DOM全称:...
  • 主要为大家详细介绍了javascript实现点击按钮切换轮播图功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 下面小编就为大家带来一篇利用JS实现点击按钮图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 点击按钮切换图片

    千次阅读 2017-12-02 16:17:03
    选显卡切换    .img0 {  height: 300px;  width: 700px;  }    .ul0 {  list-style: none;  }
  • cocos creator点击按钮切换图片

    千次阅读 2020-08-20 09:19:48
    cocos creator点击按扭键去切换另一个节点的图片,有点类似heml5中的轮播图 对于一个小白来说这一切真的都太难啦! 1.创建一个脚本。 2.在图片的节点上绑定刚刚的脚本,并...3.保存编译之后就可以切换图片了。 ...
  • //切换图片 but1.setBackgroundResource(R.drawable.qq1);
  • 代码 <html lang="en"> <head> ... } } script> head> <body> <img src="./image/a.jpg" alt="" id="a" width="30%"><br> 上一张button> 下一张button> body> html> 目录 结果 点击按钮图片进行切换
  • js按钮实现切换图片效果

    千次阅读 2019-11-01 23:02:41
    通过JavaScript设置按钮功能实现点击按钮切换上一张、下一张图片。(具体实现代码在图片后面)。 浏览器实现效果: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,750
精华内容 16,700
关键字:

js点击按钮切换图片