<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="作者：千帆">
<meta name="Keywords" content="关键词：提供给搜索引擎网站">
<meta name="Description" content="描述：对网页文档的大概介绍">
<title>搜狐女人轮播视频切换</title>
</head>
<style>
*{
margin:0;
padding:0;
}
#banner{
position:relative;/*参考物*/
950px;
height:350;
/background:red;/
margin:100px auto;
}
.img{
height:350px;
overflow:hidden;
}
.img img{
display:none;
}
.icon{
position:absolute;
left:50%;
bottom:-22px;
400px;
height:140px;
background:blue;
margin-left:-200px;
}
.icon .txt{
400px;
height:118px;
background:rgba(255,,0,0,0.5);
}
.nav{
400px;
height:22px;
}
.nav ul li{
list-style:none;
65px;
height:22px;
background:#000;
float:left;
margin-left:1px;
color:#fff
text-align:center;/*文本居中显示*/
line-height:2px;
}
.nav ul li .curr{
color:red;
}
</style>
<body>
<div id="banner">
<div class="img">
<!--优秀的工程师一定是为服务器，CPU考虑（优化代码）-->
<img src="image/1.jpg" width="100%" height="100%" alt="美女">
<img src="image/2.jpg" width="100%" height="100%" alt="美女">
<img src="image/3.jpg" width="100%" height="100%" alt="美女">
<img src="image/4.jpg" width="100%" height="100%" alt="美女">
<img src="image/5.jpg" width="100%" height="100%" alt="美女">
</div>
<div class="icon">
<div class="txt"></div>
<div class="nav">
<ul>
<li class="curr">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li style="margin-left:0;">5</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script>
//$(".nav il li")获取所有li标签
$(".nav ul li").hove(function{
//$(this)鼠标移动到哪个li上面就指代谁
$("this").addClass(".curr");siblings().removeClass("cur");
//$(".img img")获取到所有的img图片
//eq(index)获取对应序列号的图片
var index=$this.index();
$(".img img").eq(index).fadeIn().siblings().fadeOut();
})
</script>
</body>
</html>