JS实现点击button按钮切换图片的具体代码，供大家参考，具体内容如下

放暑假在家打算学习html/css/js制作网页，只有html/css的一些基础。实现效果如图：

这个网页很简单，是用Dreamweaver写的，但是是通过自己做的，算是对JS的一个入门案列。

最初的想法是是做一轮播效果，但是刚开始学JS发现有很多问题，所以就做了一个简单的图片切换。

body部分：

JS实现图片的切换
   
     
       <     
     
       
         
         
         
         
       
     
     
       >     
   

JS部分：

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;按钮边框圆角

接下来就是想办法实现轮播效果了，慢慢来吧！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！