收藏
批改状态：未批改
老师批语：
轮播&TAB总结：在需要点击的元素上设置onclick并且给予一个下标，创建一个js函数函数名和onclick一样并且传参。创建获取需要轮播的元素如使用【document.getElementById('box')】并且赋值给一个变量，再获取该变量下需要轮播的元素并赋值给一个变量。 使用for循环知道变量下标的长度，让每个需要轮播的元素下标样式是不显示。在循环外层设置该轮播元素的下标为函数传参和样式为块级元素进行显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-size: 12px;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
body{
background:#f5f5f5;
}
#box{
width: 800px;
height: 500px;
margin: 20px auto;
position: relative;
overflow: hidden;
}
#box img{
width: 800px;
height: 500px;
}
#box p{
position: absolute;
bottom: 4px;
left: 4px;
color: #fff;
}
#box p span{
width: 20px;
height: 20px;
line-height: 20px;
border-radius:50%;
background: rgba(254,254,254,0.6);
display: inline-block;
text-align: center;
}
#box p span:hover{
background: red;
cursor:pointer
}
.menu{
width: 100%;
height: 36px;
background: #000;
}
.nav{
width: 800px;
margin:0 auto;
}
.nav li{
width: 120px;
height: 36px;
line-height: 36px;
text-align: center;
background: red;
display: block;
float: left;
position: relative;
}
.nav li a{
padding:0 10px;
color: #fff;
font-size: 14px;
height: 36px;
line-height: 36px;
}
.two{
position: absolute;
display: none;
top: 36px;
z-index: 1;
}
.two li:hover{
background: #000;
}
#news{
background: #ccc;
width: 800px;
height: 200px;
margin: 0 auto;
margin-bottom: 20px;
}
#news #title{
height: 40px;
background: #b54a3e;
}
#title li{
display: block;
float: left;
padding-right: 2px;
height: 40px;
line-height: 40px;
font-size: 16px;
padding:0 12px;
color: #fff;
}
#title li:hover{
background: red;
cursor:pointer
}
#content{
height: 160px;
overflow: hidden;
}
#content li{
width: 200px;
height: 26px;
line-height: 26px;
display: block;
float: left;
}
#content li a{
color:#b35353;
padding-left: 10px;
}
.cont{
display: none;
}
</style>
<script type="text/javascript">
$(function(){
$('.one>li').mouseover(function(){
$(this).find('.two').slideDown(500)
});
$('.one>li').mouseleave(function(){
$(this).find('.two').slideUp(500)
})
})
</script>
</head>
<body>
<div class="menu">
<div class="nav">
<ul class="one">
<li><a href="#">网站首页</a></li>
<li><a href="#">导航菜单</a>
<ul class="two">
<li><a href="#">导航菜单</a></li>
<li><a href="#">导航菜单</a></li>
<li><a href="#">导航菜单</a></li>
<li><a href="#">导航菜单</a></li>
</ul>
</li>
<li><a href="#">导航菜单</a></li>
<li><a href="#">导航菜单</a></li>
<li><a href="#">导航菜单</a></li>
<li><a href="#">导航菜单</a></li>
</ul>
</div>
</div>
<div id="box">
<a href="#"><img src="https://img.php.cn/upload/webpage/000/000/006/593119cb42759634.jpg" alt=""></a>
<a href="#"><img src="https://img.php.cn/upload/webpage/000/000/006/5931149f5db2a807.jpg" alt=""></a>
<a href="#"><img src="https://img.php.cn/upload/webpage/000/013/709/5989699f1cfed983.jpg" alt=""></a>
<a href="#"><img src="https://img.php.cn/upload/webpage/000/013/709/59896cc374e7f146.jpg" alt=""></a>
<a href="#"><img src="https://img.php.cn/upload/webpage/000/000/001/59882639117c2119.jpg" alt=""></a>
<p>
<span onclick='chenge(0)'>1</span>
<span onclick='chenge(1)'>2</span>
<span onclick='chenge(2)'>3</span>
<span onclick='chenge(3)'>4</span>
<span onclick='chenge(4)'>5</span>
</p>
</div>
<div id="news">
<div id="title">
<li onclick="tab(0)">新闻1</li>
<li onclick="tab(1)">新闻2</li>
<li onclick="tab(2)">新闻3</li>
<li onclick="tab(3)">新闻4</li>
</div>
<div id="content">
<div class="cont" style="display:block">
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
<li><a href="">我是新闻1</a></li>
</div>
<div class="cont">
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
<li><a href="">我是新闻2</a></li>
</div>
<div class="cont">
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
<li><a href="">我是新闻3</a></li>
</div>
<div class="cont">
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
<li><a href="">我是新闻4</a></li>
</div>
</div>
</div>
<script type="text/javascript">
function chenge(num){
//先获取幻灯片box id
var obj_box = document.getElementById('box');
// 获取改元素下面的标签 a
var obj_img = obj_box.getElementsByTagName('a');
// 循环a标签让循环的下标的图片不显示
for (var i = 0; i < obj_img.length; i++) {
obj_img[i].style.display='none';
};
obj_img[num].style.display='block';
}
</script>
<script type="text/javascript">
function tab(num){
var news = document.getElementById('news');
var cont = news.getElementsByClassName('cont');
for (var i = 0; i < cont.length; i++) {
cont[i].style.display='none';
};
cont[num].style.display='block';
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
