<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px auto;
padding: 0px;
}
body{
width: 1200px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
#daohang{
position: relative;
top: 0;
width: 1200px;
height: 50px;
z-index: 100;
}
#daohang .zcd{
margin-left: 0;
width: 1200px;
height: 50px;
line-height: 50px;
background-color: orange;
}
#daohang .zcd li{
float: left;
width: 300px;
text-align: center;
}
#daohang .zcd li a{
display: block;
width: 300px;
height: 50px;
color: #000;
}
#daohang .zcd li a:hover{
background-color: red;
color: #fff;
}
#yanse{
float: right;
color: #000;
background-color: white;
font-size: 20px;
font-weight: bold;
}
.ejcd{
background-color: orange;
display: none;
}
#lunbo{
width: 1200px;
height: 600px;
position: absolute;
top: 60px;
z-index: 1;
}
#lunbo img{
width: 1200px;
display: none;
position: absolute;
top: 0px;
}
#lunbo img.show{
display: block;
}
#lunbo ul{
position: relative;
top: 400px;
}
#lunbo ul li{
background-color: #000;
color: #fff;
float: left;
font-size: 15px;
width: 100px;
height: 30px;
line-height: 30px;
margin: 15px 10px;
text-align: center;
}
#lunbo ul li.active{
background-color: green;
}
</style>
</head>
<body>
<div id="daohang">
<ul class="zcd">
<li><a href="#">首页</a></li>
<li><a href="#">景点</a>
<ul class="ejcd">
<li><a href="#">丽江千古情</a></li>
<li><a href="#">错峰出游抄</a></li>
<li><a href="#">妇女节特辑</a></li>
<li><a href="#">三亚自由行</a></li>
<li><a href="#">踏青至福建</a></li>
<li><a href="#">新云南心旅</a></li>
<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 id="yanse">
请选择颜色：
<select id="ys">
<option value="white">白色</option>
<option value="blue">蓝色</option>
<option value="yellow">黄色</option>
</select>
</li>
</ul>
</div>
<div id="lunbo">
<img src="img/jn1.jpg" class="show">
<img src="img/jn2.jpg">
<img src="img/jn3.jpg">
<img src="img/jn4.jpg">
<img src="img/jn5.jpg">
<img src="img/jn6.jpg">
<img src="img/jn7.jpg">
<img src="img/jn8.jpg">
<img src="img/jn9.jpg">
<img src="img/jn10.jpg">
<ul id="menu">
<li class="active"><a href="#"></a>丽江千古情</li>
<li><a href="#"></a>错峰出游抄</li>
<li><a href="#"></a>妇女节特辑</li>
<li><a href="#"></a>三亚自由行</li>
<li><a href="#"></a>踏青至福建</li>
<li><a href="#"></a>新云南心旅</li>
<li><a href="#"></a>东北特色游</li>
<li><a href="#"></a>张家界风情</li>
<li><a href="#"></a>三亚特价抄</li>
<li><a href="#"></a>洛阳牡丹节</li>
</ul>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$(".zcd>li:has('ul')").hover(
function(){
$(this).find('.ejcd').stop().slideDown();
},
function(){
$(this).find('.ejcd').stop().slideUp();
}
)
})
</script>
<script>
$(function(){
var timer;
var cur=0;
var len=$("#lunbo li").length;
function showImg(){
timer=setInterval(function(){
cur++;
if(cur>=len){
cur=0;
}
$("#lunbo img").eq(cur).fadeIn(2000).siblings("img").fadeOut(2000);
$("#lunbo li").eq(cur).addClass("active").siblings("li").removeClass("active");
},2000)
}
showImg();
})
</script>
<script>
document.getElementById("ys").onchange = function(){
document.bgColor=this.value;
document.fgColor=this.value+255;
document.getElementById("yanse").style.backgroundColor=this.value;
}
</script>
</body>
</html>
fuxi.zip （12个子文件） 
fuxi js 
jquery-3.3.1.min.js 85KB img 
jn1.jpg 69KB jn5.jpg 58KB jn7.jpg 108KB jn8.jpg 68KB jn6.jpg 56KB jn10.jpg 68KB jn4.jpg 78KB jn9.jpg 73KB jn3.jpg 90KB jn2.jpg 65KB css 
index.html 4KB资源评论
2201_75758045
- 粉丝: 0
- 资源: 1
最新资源
- 时间序列-黄金-30分钟数据
- UML类图中的泛型与模板类表示
- (源码)基于Arduino的CosplayWings控制系统.zip
- 数据集-目标检测系列- 游艇 检测数据集 yacht ＞＞ DataBall
- 时间序列-黄金-15分钟数据
- (源码)基于C语言DiskSim框架的WLAFTL磨损均衡算法模拟系统.zip
- 数据集-目标检测系列- 儿童单车、平衡车、三轮车 检测数据集 kid-bicycle ＞＞ DataBall
- (源码)基于WinUI3的照相管理系统.zip
- (源码)基于Java和MySQL的学生成绩管理系统.zip
- trekcolors R 包为科幻迷和数据分析爱好者提供了独特的 Star Trek 和 LCARS 调色板
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
