<!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
最新资源
- 12025000线边仓.zip
- 洞见研报腾讯科技（深圳）有限公司创投信息
- 基于ECharts智慧交通数据可视化大屏源码.zip
- 洞见研报优信二手车,优信拍(二手车竞价拍卖服务供应商,优信互联（北京）信息技术有限公司)创投信息
- 洞见研报元气森林（北京）食品科技集团有限公司创投信息
- 【龙艺集团,洞见研报】产业乘风，人力资源服务如何助力企业攻守兼备？
- 机械设计光伏组件组框设备sw18可编辑全套技术资料100%好用.zip
- 报告-Selected Poems of Tagore-The Nightingale and the Rose-Selected Works of William Somerset Maugha
- “春季开学家长会”小学生教学教案模板.pptx
- “节约粮食 从我做起”班会教学课件模板.pptx
- “谷雨”教案课件模板小学二十四节气.pptx
- “树师德.扬师风”幼儿园幼师培训教案模板pptx.pptx
- “资助诚信”专题班会教案课件模板.pptx
- 2025年五一劳动节班会模板“劳动光荣”.pptx
- 大学新生“职业生涯规划”讲座教案课件模板.pptx
- 电商零售数据集，总共包含42万条数据，可以用于电商销售预测系统分析
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
