实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width:500px;height:300px;margin:50px auto;
overflow: hidden;
position:relative;
}
img{
width:100%;height:100%;
}
p{
color:#fff;
width:500px;height:30px;
position:absolute;z-index:1000;
bottom:0;left:0;
text-align:center;
line-height: 30px;
}
p span{
display:inline-block;
width:20px;
height:20px;
line-height:20px;
text-align:center;
background:rgba(254,254,254,0.3);
border-radius: 50%;
cursor:pointer;
}
p span:hover{
background:red;
}
</style>
</head>
<body>
<div id="photo">
<a href=""><img src="static/images/1.jpg"></a>
<a href=""><img src="static/images/2.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/4.jpg"></a>
<a href=""><img src="static/images/5.jpg"></a>
<p>
<span onclick="change(0)">1</span>
<span onclick="change(1)">2</span>
<span onclick="change(2)">3</span>
<span onclick="change(3)">4</span>
<span onclick="change(4)">5</span>
</p>
</div>
<script type="text/javascript">
function change(num){
var obj=document.getElementById('photo');
var obj_a=obj.getElementsByTagName('a');
for(var i=0;i<obj_a.length;i++){
obj_a[i].style.display="none";
}
obj_a[num].style.display="block";
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例