JS实现点击button按钮切换图片
JS实现点击button按钮切换图片
放暑假在家打算学习html/css/js制作网页,只有html/css的一些基础。实现效果如图:
这个网页很简单,是用Dreamweaver写的,但是是通过自己做的,算是对JS的一个入门案列。
最初的想法是是做一轮播效果,但是刚开始学JS发现有很多问题,所以就做了一个简单的图片切换。
body部分:
<body>
<h1>JS实现图片的切换</h1>
<div class="container"><div class="one"><div class="one-left"><button id="pre"><b><</b></button></div><div class="one-center"><ul><li style="display:none" id="a"><img src="data:images/1.jpg" width="600" height="300"></li><li style="display:none" id="b"><img src="data:images/2.jpg" width="600" height="300"></li><li style="display:none" id="c"><img src="data:images/3.jpg" width="600" height="300"></li><li style="display:block" id="d"><img src="data:images/4.jpg" width="600" height="300"></li></ul></div><div class="one-right"><button id="next"><b>></b></button></div></div>
</div>
</body>
JS部分:
<script language="javascript">var a=document.getElementById("a");var b=document.getElementById("b");var c=document.getElementById("c");var d=document.getElementById("d");var b1=document.getElementById("pre");var b2=document.getElementById("next");var num=4;b1.onclick=function(){ num--;if(num<1)num=4;panduan();}b2.onclick=function(){num++;if(num>4)num=1;panduan(); }function panduan(){if(num==1){a.style.display="block";b.style.display="none";c.style.display="none";d.style.display="none";}if(num==2){a.style.display="none";b.style.display="block";c.style.display="none";d.style.display="none";}if(num==3){a.style.display="none";b.style.display="none";c.style.display="block";d.style.display="none";}if(num==4){a.style.display="none";b.style.display="none";c.style.display="none";d.style.display="block";}}
</script>
CSS部分:
*{margin:0;padding:0;
}
h1{text-align:center;
}
li{list-style:none;float:left;
}
.container{width:1000px;height:1000px;margin:0 auto;
}
.one{width:700px;height:400px;margin:100px auto;
}
.one-center{width:600px;height:300px;float:left;
}
.one-left{width:50px;height:300px;float:left;
}
.one-right{width:50px;height:300px;float:right;
}
button{width:50px;height:300px;background-color:#999;border:none;outline:none;
}
button:hover{background-color:#666;
}
这里面有两个关键点,一是如何隐藏图片,二是button按钮点击和样式。
1.图片的隐藏,我最初想的是用hidden来实现图片的隐藏,设置hidden属性的真假值来实现,但是发现只要给某个标签设置hidden,这个标签就不会显示,我不知道可以通过JS删除和添加hidden属性,因此我就改用style.display="none"
和style.display="inline"
来实现隐藏和显示。style.display="none"
会隐藏该标签,而且隐藏后该标签不占位。后来我又查找发现可以通过a.style.visibility="hidden";
和a.style.visibility="visible";
来实现隐藏和显示,a.style.visibility="hidden";
方法隐藏了该标签,但是该标签还是会占位。
2.第二个就是button属性,主要的问题时button样式的问题,如何才能做一个好看的button,通过查找找到了设置button相关的值。
border:none
; 设置按钮无边框
outline:none;
消除按钮点击后出现的表示被点击的边框
background:url(...)
按钮背景图片
text-shadow: 0 1px 1px rgba(0,0,0,.3);
文字阴影
box-shadow: 0 5px 7px rgba(0,0,0,.2);
按钮阴影
border-radius:15px;
按钮边框圆角
接下来就是想办法实现轮播效果了,慢慢来吧!
JS实现点击button按钮切换图片相关推荐
- 点击某个按钮切换图片(按钮颜色跟着改变)
html: <div id="pic"><img src="img/1.jpg" alt=""><span&g ...
- Android点击Button按钮切换按钮文字显示
概述 首先声明一个boolean类型的对象status=fasle,给Button点击事件中添加if-else选择,当!false时,按钮显示文字open,然后status=true;在else中显示 ...
- js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录 前言 一.DOM是什么? 二.对象的HTML DOM 树 三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
- 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客 代码部分: 点击(此处)折叠或打开 <!DOCTYPE html PUBLIC "-// ...
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html> <h ...
- PHP——0128练习相关2——js点击button按钮跳转到另一个新页面
js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10 我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎 ...
- Android 点击按钮切换图片
Android 点击按钮切换图片 效果如图: 点击后: 主要代码: //切换图片 but1.setBackgroundResource(R.drawable.qq1); 全部代码: public cl ...
- vue中点击按钮切换图片
vue中点击按钮切换图片 直接附上代码,亲测有效 <!-- --> <template><div><div class="">< ...
- JavaScript实现京东轮播图效果——自动轮播,左右按钮切换图片,小圆圈跟随图片变化,点击小圆圈可跳转图片,无缝循环播放
JavaScript实现京东轮播图效果--自动轮播,左右按钮切换图片,小圆圈跟随图片变化,点击小圆圈可跳转图片,无缝循环播放 静态效果图如下: CSS部分 *{margin: 0;padding: 0 ...
最新文章
- 在Windows Server 2008 R2下搭建jsp环境(四)-在测试的过程中可能出现的问题
- Nacos源码覆盖实例列表
- oracle中行数少于1000,oracle中in的个数超过1000的解决办法
- java tcp ip原理_从0到1用java再造tcpip协议栈:ICMP协议的原理和实现
- centos7 识别移动硬盘
- 《企业大数据系统构建实战:技术、架构、实施与应用》——第1章 企业大数据战略定位 1.1 宏观...
- 001-为什么Java能这么流行
- 使用docker安装easy-mock
- 企业如何高效用云?| 资深运维架构师细说云架构下的运维体系构建
- Alexa工具栏研究
- 地理中经纬度的英文名称
- 安卓python编辑器-10 个平板电脑上的 Python 编辑器
- java 众数算法_众数的算法分析
- 从师傅到伙伴:华为背后总是有IBM的影子
- 结婚5年又发现了一场爱情 感人
- matlab进行fm调制与解调,基于matlab的fm信号调制与解调.doc
- c语言未定义标识符fife,C语言编程处理数据
- java小游戏:五子棋人机大战
- day19TreeSet类
- 图像采集及处理多线程编程