实例
<!DOCTYPE html>
<html>
<head>
<title>hello world!</title>
<style type="text/css">
div{width: 500px;height: 300px;margin: 50px auto;overflow: hidden;position: relative;}
img{width: 500px;height: 300px;}
p{width: 500px;height: 30px;color: 254,254,254;text-align: center;line-height: 30px;position: absolute;bottom: 0;z-index: 999;}
p span{display: inline-block;width: 20px;height: 20px;text-align: center;background: rgba(254,254,254,0.5);border-radius: 50%;line-height: 20px;cursor: pointer;}
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例