精华内容
下载资源
问答
  • javascript实现点击按钮切换图片

    千次阅读 2021-01-03 21:32:07
    效果图: 首先搭建基本的结构 ...--默认显示第一张图片--> <img src="img/1.jpg" alt="加载失败" style="width: 800px;height: 400px;"> <button id="pre">上一张</button> <butto

    效果图:
    效果如图

    首先搭建基本的结构

    <div id="div">
            <p id="desc"></p>
            <!--默认显示第一张图片-->
            <img src="img/1.jpg" alt="加载失败" style="width: 800px;height: 400px;">
            <button id="pre">上一张</button>
            <button id="next">下一张</button>
     </div>
    

    其次设置显示的样式

    <style>
            * {
                margin: 0;
                padding: 0;
            }
        
            #div {
                width: 800px;
                height: 420px;
                margin: 20px auto;
                background-color: rgb(243, 119, 36);
                text-align: center;
            }
        
            button:hover {
                cursor: pointer;
            }
        </style>
    

    最重要的JavaScript部分

       <script>
            //预加载,等页面加载完毕后,再执行脚本
            window.onload = function () {
             
                var num = document.getElementsByTagName("img")[0];
                //这里虽然只有一个img标签,但是num变量的结果依然是一个数组
                
                //定义图像地址
                var shuzu = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg", "img/9.jpg", "img/10.jpg", "img/11.jpg", "img/12.jpg"];
    
                //获取按钮
                var prev = document.getElementById("pre");
                var next = document.getElementById("next");
                var index = 0;
                
                //图片描述
                var p_desc = document.getElementById("desc");
                p_desc.innerHTML = "一共" + shuzu.length + "张图片" + ",当前是第" + (index + 1) + "张";
                //注意此处前面是字符串的拼接,实现加法需要用到括号
                
                //点击切换图片
                prev.onclick = function () {
                    index--;
                    //此处让它循环
                    if (index < 0)
                        index = shuzu.length - 1;
                    num.src = shuzu[index];
                    p_desc.innerHTML = "一共" + shuzu.length + "张图片" + ",当前是第" + (index + 1) + "张";//注意此处前面是字符串的拼接,实现加法需要用到括号
                }
    
                next.onclick = function () {
                    index++;
                    if (index > shuzu.length - 1)
                        index = 0;
                    num.src = shuzu[index];
                    p_desc.innerHTML = "一共" + shuzu.length + "张图片" + ",当前是第" + (index + 1) + "张";//注意此处前面是字符串的拼接,实现加法需要用到括号
                }
            }
    
    展开全文
  • JavaScript实现点击按钮切换图片

    千次阅读 2020-12-28 22:39:28
    完成图片切换功能 <style> .div{ width: 800px; height: 600px; } .btn{ width: 120px; height: 60px; align-content: center; } .divcss5{margin:0 auto} <...

     

    完成图片切换功能

    <style>
            .div{
                width: 800px;
                height: 600px;
            }
            .btn{
                width: 120px;
                height: 60px;
                align-content: center;
    
            }
            .divcss5{margin:0 auto}
        </style>
    </head>
    <body>
    <div class="div divcss5"><img src="cankao/0.jpg" width="800"></div><br/>
    <div style="text-align:center">
        <button class="btn" onclick="qiehuan()">切换</button>
    </div>
    
    </body>
    <script>
        var i=0;
        function qiehuan() {
            i++;
            if(i==6){
                i=0;
            }
            var img=document.querySelector("img")
            img.src="cankao/"+i+".jpg"
        }
    </script>

     

    展开全文
  • 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>
    
    展开全文
  • 原生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....
    
    
    
    <!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.onload=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].onclick=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>
    
    
    

    页面展示效果
    在这里插入图片描述

    展开全文
  • 利用js实现点击按钮切换图片的功能,并且能够记录当前所展示的图片的位置,通过这个练习来巩固一下对DOM中的节点查询和事件绑定的知识。 提示:以下是本篇文章正文内容,下面案例可供参考 一、DOM是什么? DOM全称:...
  • 今天主要给大家分享一段js和css代码组合实现鼠标点击按钮图片切换图片自动切换点击左右按钮图片切换三种效果,代码非常简单,需要的朋友一起来学习吧
  • 主要为大家详细介绍了javascript实现点击按钮切换轮播图功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 下面小编就为大家带来一篇利用JS实现点击按钮图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • JS实现点击button按钮切换图片

    万次阅读 多人点赞 2018-08-10 12:07:14
    JS实现点击button按钮切换图片 放暑假在家打算学习html/css/js制作网页,只有html/css的一些基础。实现效果如图: 这个网页很简单,是用Dreamweaver写的,但是是通过自己做的,算是对JS的一个入门案列。 最初的...
  • 主要介绍了原生javascript实现图片按钮切换,需要的朋友可以参考下
  • ">切换图片 <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实现点击循环切换图片效果,需要的朋友参考下
  • 前天帮祥哥他女票做个网页作业,大概要求就是使用两个按钮控制图片切换,在页面右上角出现一个图片按钮点击这个按钮出现下拉菜单。 第一个要求还是很简单的,第二个多花了我几个小时的时间,因为我只做过select...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>... 1. 事件: 点击事件 onclick 2.... 3....// alert("要切换了") var im
  • 实现点击按钮切换图片的效果 具体代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta...
  • 如图,点击不同的按钮切换不同的背景图。初来乍到没东西悬赏,求大牛们解答一下![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/1.gif)![图片说明]...
  • js实现点击随机切换图片

    千次阅读 2019-03-06 15:09:00
    **js实现点击随机切换图片 首先在img文件夹上放入十张图片 然后就使用Math.random函数实现随机数 实现点击之后随机切换图片(注意Math.floor是向下取整,可以取到0,所以图片的名称最好从0开始) ...
  • JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1、案例代码: demo.html: <!...JQuery实现点击按钮切换图片</title>  ...
  • 切换图片</p> <button id="liudehua">刘德华</button> <button id="zhangxueyou">张学友</button> <img src="屏幕截图(19).png" title="刘德华"> <script> //get yuansu...
  • js按钮实现切换图片效果

    千次阅读 2019-11-01 23:02:41
    通过JavaScript设置按钮功能实现点击按钮切换上一张、下一张图片。(具体实现代码在图片后面)。 浏览器实现效果: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
  • 今天使用CSS中的:target选择器来实现点击按钮切换相对应的图片的demo,此demo也可以使用JS来实现。 demo的结构: img1 img2 img3 img4 demo的CSS样式: a{ padding:5px 10px; border:1px ...
  • 使用fullScreen API实现全屏 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content=...
  • 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> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,499
精华内容 16,999
关键字:

js实现点击按钮切换图片