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;
按钮边框圆角
接下来就是想办法实现轮播效果了,慢慢来吧!