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; 按钮边框圆角
接下来就是想办法实现轮播效果了，慢慢来吧！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
查看更多关于JS实现点击button按钮切换图片的详细内容...