<!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;/*参考物*/
width:950px;
height:350;
/background:red;/
margin:100px auto;
}
.img{
width:
height:350px;
overflow:hidden;
}
.img img{
display:none;
}
.icon{
position:absolute;
left:50%;
bottom:-22px;
width:400px;
height:140px;
background:blue;
margin-left:-200px;
}
.icon .txt{
width:400px;
height:118px;
background:rgba(255,,0,0,0.5);
}
.nav{
width:400px;
height:22px;
}
.nav ul li{
list-style:none;
width: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 ).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>