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="images/1.jpg" width="600" height="300"></li> <li style="display:none" id="b"><img src="images/2.jpg" width="600" height="300"></li> <li style="display:none" id="c"><img src="images/3.jpg" width="600" height="300"></li> <li style="display:block" id="d"><img src="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;按钮边框圆角
接下来就是想办法实现轮播效果了，慢慢来吧！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Json实现传值到后台代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-06-06
在注册信息的时候，常常需要通过下拉菜单让用户选择，而且希望用户在第一个下拉框做的选择，影响第二个下拉框的内容。有时候，如果第一个下拉框不作出选择，第二个下拉框根本不会页面上显示，为了给用户呈现一个更清晰的页面。2013-07-07
JavaScript 字符串处理函数使用小结，学习js的朋友可以参考下。2010-12-12
面向对象编程(Object Oriented Programming)将现实世界中的复杂关系抽象成一个个对象,通过对象之间的分工合作对现实世界进行模拟2022-10-10
在实际开发中我们经常需要获取其他域的资源，本篇文章主要介绍了详解Javascript几种跨域方式总结，有兴趣的可以了解一下。2017-02-02
javascript深拷贝是初学者甚至有经验的开发着,都会经常遇到问题,下面这篇文章主要给大家介绍了关于JavaScript深拷贝的几种实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
在做一个项目的时候才发现的这个bug，其实这是一个很常见的问题，只是之前对图片的处理太少，没有碰到过。2014-04-04
这篇文章主要介绍了JS前端解压zip的方法和技巧,业务中有时候需要获取某个 zip 压缩包内的文件内容展示到前端,在 zip 包体积不是那么大的时候并且不涉及压缩包解密的时候,可以考虑纯前端方案,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了JS实现简单表格排序操作,结合具体实例形式分析了JavaScript事件响应及table表格动态操作相关技巧,需要的朋友可以参考下2017-10-10
这篇文章主要为大家介绍了JavaScript操作元素，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
最新评论