jquery菜单式图片轮播特效仿淘宝
jquery菜单式图片轮播特效仿淘宝，废话不说，看代码：效果图如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery菜单式图片轮播特效仿淘宝</title>
<style>
*{margin:0px;padding:0px;}
#box{
width:200px;
height:320px;
overflow:hidden;
margin:10px auto;
box-shadow:0px 0px 5px #ddd;
position:relative;
}
#box div{
width:600px;
height:320px;
position:absolute;
left:0px;
top:0px;
z-index:1;
}
#box div img{
width:200px;
float:left;
}
#box ul{
width:100%;
height:90px;
overflow:hidden;
position:absolute;
left:0px;
bottom:30px;
z-index:2;
}
#box ul li{
width:180px;
height:30px;
line-height:30px;
font-size:12px;
color:#FFF;
position:relative;
cursor:pointer;
}
#box ul li span{
padding-left:10px;
}
#box ul li i{
display:block;
width:5px;
height:9px;
background:url(images/ico.png) no-repeat -107px -20px;
position:absolute;
top:10px;
right:20px;
display:none;
}
</style>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var aLi = $('#box ul li');
var oDiv = $('#box div');
aLi.mouseover(function(){
aLi.stop();
aLi.find('i').hide();
$(this).find('i').show();
oDiv.stop().animate({
left:-$(this).index()*200
},500)
aLi.stop();
$(this).siblings().animate({
width:180
},600);
$(this).animate({
width:200
},600)
})
})
</script>
</head>
<body>
<div id="box">
<div>
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
</div>
<ul>
<li style="background:#985479;"><span>三星S4天猫抢先首发</span><i> </i></li>
<li style="background:#fc6a6d;"><span>大家电周末疯狂抢购</span><i> </i></li>
<li style="background:#2f8b98;"><span>平板春游记 分享有礼</span><i> </i></li>
</ul>
</div>
</body>
</html>
补充：web前端 , JavaScript ,
