<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<title>test</title>
<style type="text/css">
*{margin:0;padding:0;}
.web{ width:100%;
height:503px;
position:relative;
overflow:hidden;
}
.con{
width:100%;
height:503px;
background:pink;
}
.con ul li{
width:100%;
height:503px;
list-style:none;
border:1px solid red;
display:none;
}
.con ul li a{
width: 100%;
height: 503px;
display: block;
background:#C0FF3E ;
background-position:center center;
opacity:0;
}
.menu{
width:698px;
height:55px;
position:absolute;left:50%;bottom:25px;
margin-left:-349px;
}
.menu ul li{
list-style:none;
width:90px;
height:51px;
float:left;
margin-left:5px;
cursor:pointer;
}
.menu ul .bor{border:2px solid #f06000;}
</style>
</head>
<body>
<div class="web">
<div class="con">
<ul>
<li style="background:#EE1289 center;display: block;">
<a href="#"></a>
</li>
<li style="background:yellow center;"><a href="#"></a>
</li>
<li style="background:green center;"><a href="#"></a>
</li>
<li style="background:gray center;"><a href="#"></a>
</li>
<li style="background:#FFE4E1 center;"><a href="#"></a>
</li>
<li style="background:#FF4040 center;"><a href="#"></a>
</li>
<li style="background:#FF0000 center;"><a href="#"></a>
</li>
</ul>
</div>
<div class="menu">
<ul>
<li class="bor" style="background:blue;"></li>
<li style="background:blue;"></li>
<li style="background:blue;"></li>
<li style="background:blue;"></li>
<li style="background:blue;"></li>
<li style="background:blue;"></li>
<li style="background:blue;"></li>
</ul>
</div>
</div>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var _index=0; //存放menu ul li 的下标
var timer=0;
$(".web").hover(function(){
$(".con ul li a").css("opacity","1");//当鼠标移到web上面时候，play播放图标显示
},function(){
$(".con ul li a").css("opacity","0");//当鼠标移出web时候，play播放图标隐藏
})
$(".menu ul li").hover(function(){ //定义下面小图片列表鼠标移入事件
_index=$(this).index(); //获取当前元素的索引
$(".con ul li a").css("opacity","0"); //为a标签透明度设置为0，即不显示
$(this).addClass("bor").siblings().removeClass("bor");//为当前元素添加样式其余删除样式
$(".con ul li").eq(_index).fadeIn(300).siblings().fadeOut(300);
clearInterval(timer); //鼠标移到图片上面，清除定时器，轮播暂停
},function(){
$(".con ul li a").css("opacity","1");//当鼠标移出，play图片显示，透明度为1是显示
timer=setInterval("jumper()",3000); //鼠标移除的时候调用定时器，图片继续轮播
})
function jumper(){ //声明一个函数，供定时器调用
_index++; //图片从当前往后循环轮播，相当于+1
if(_index>6) //到最后一张，索引是6，如果大于6从第一张循环
_index=0;
//为当前元素添加样式bor，并且让他的兄弟元素移除bor样式
$(".menu ul li").eq(_index).addClass("bor").siblings().removeClass("bor");
//为当前元素添加每300秒渐显效果，并且让他的兄弟元素每300秒淡出效果
$(".con ul li").eq(_index).fadeIn(300).siblings().fadeOut(300);
}
timer=setInterval("jumper()",3000);//设置一个定时器为定时器，每隔三秒钟调一次函数
</script>
</body>
</html> 最佳答案
