<!DOCTYPE html>
<html>
<head>
<title>js基础第三章 图片切换</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="\htmlstudy/demo3/1.ico">
<style type="text/css">
div{
width: 500px;height: 300px;
margin: 20px auto;
overflow: hidden;
position: relative; /*后面的p标签需要定位到图片内*/
}
img{
width: 500px; height: 300px;
}
p{
width: 500px;height: 30px; /*设定了宽高才能让文本居中;*/
position:absolute;z-index: 1000; bottom: 0;
/*绝对定位后给它一个距离,让它显示在某个位置*/
line-height: 30px;
text-align: center; /*文本居中,你是需要在某个范围内的*/
color: red;
}
p span{
/*span是行内标签,没有宽高;需要转换成块元素才能设置宽高;*/
display: inline-block; /*行转块;*/
width: 20px;height: 20px;
background: #ccc;
text-align: center; /*文字左右居中*/
line-height: 20px; /*想让文字居中,加一个行高即可;*/
border-radius: 10px; /*倒圆角*/
}
</style>
</head>
<body>
<div id="photo" class="photo">
<a href=""><img src="F:/tupian/1.jpg"></a>
<a href=""><img src="F:/tupian/2.jpg"></a>
<a href=""><img src="F:/tupian/3.jpg"></a>
<a href=""><img src="F:/tupian/4.jpg"></a>
<p class="dianji">
<span onclick ="change(0)">1</span>
<span onclick="change(1)">2</span>
<span onclick="change(2)">3</span>
<span onclick="change(3)">4</span>
</p>
</div>
<script type="text/javascript">
function change(num){
// 获取id这个对象;
var obj=document.getElementById('photo');
//获取div下面标签名称a连接;
var obj_a=obj.getElementsByTagName('a')
// 遍历a标签;
for(var i=0;i<obj_a.length;i++){
// 将遍历的数据a隐藏;
obj_a[i].style.display="none";
}
//点击事件后,显示当前索引的这个链接图片;
obj_a[num].style.display='block';
}
</script>
</body>
</html>总结:
