收藏
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 第三章</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<style type="text/css">
div{
width: 500px;height: 300px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
img{width: 500px;height: 300px;display: none}
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;
text-align: center;
background: rgba(254,254,254,0.6);
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">
// 利用获取元素下标实现简单轮播，获取到元素下标从0开始，给对应span一个点击事件，每次循环
// 图片元素数组，传入数字线标的图片元素显示，其他隐藏
function change(num){
var obj=document.getElementById('photo');
var obj_a=obj.getElementsByTagName('a');
//隐藏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>选项卡
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 第三章</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<style type="text/css">
#photo{
width: 500px;height: 300px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
#photo div{position: absolute;
width: 400px;
height: 300px;
}
.one{background: red}
.two{background: green}
.three{background: blue}
</style>
</head>
<body>
<div id="photo">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
</div>
<div style="width:500px;margin: 50px auto;">
<button onclick="change(0)" >红</button><button onclick="change(1)" >绿</button><button onclick="change(2)" >蓝</button>
</div>
<script type="text/javascript">
// 原理和轮播图相同，通过点击事件传入下标，先循环隐藏所有选项卡，再显示传入下标得选项卡
function change(num){
var obj=document.getElementById('photo');
var div=obj.getElementsByTagName('div');
console.log(div);
for(var i=0;i<div.length;i++){
div[i].style.display="none";
}
div[num].style.display="block";
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：
通过点击事件传入元素相应下标来控制显示隐藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
