<!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>
