var oUl =$('ul'),
oLi =$('li'),
len = oLi.length,
width =parseInt(oUl.css('width')),
gw = width / len,
ot = Math.floor((width -400)/(len -1));
flag =true;functioninit(){if(flag){change($(oLi[len-1]));}}functionbindEvent(){
oLi.on('click',function(){change($(this));if(($(this).index()+1)== len){
flag =false;}else{
flag =true;}});
oUl.on('mouseleave',function(){init();})}functionchange(event){
event.animate({'width':'400px'},300,'linear').siblings().animate({'width':ot +'px'},300,'linear');
event.find('.title').css({'display':'none'})
event.siblings().find('.title').css({'display':'block'})
event.find('.decration').css({'bottom':'0px'})
event.siblings().find('.decration').css({'bottom':'-50px'})}init();bindEvent();
CSS代码
*{
margin:0;
padding:0;
list-style:none;}
body{
background-color:#333;}.wrapper{
width:80%;
margin:50px auto;
padding:40px;}.wrapper ul{
width:100%;
height:300px;
overflow: hidden;}.wrapper ul li{
float: left;
width:14.2;
height:260px;
position:relative;
overflow:hidden;
cursor:pointer;}.picBox{
width:100%;
height:100%;}.picBox1{
background:url(images/1.jpg) no-repeat center 0;}.picBox2{
background:url(images/2.jpg) no-repeat center 0;}.picBox3{
background:url(images/3.jpg) no-repeat center 0;}.picBox4{
background:url(images/4.jpg) no-repeat center 0;}.picBox5{
background:url(images/5.jpg) no-repeat center 0;}.picBox6{
background:url(images/6.jpg) no-repeat center 0;}.picBox7{
background:url(images/7.jpg) no-repeat center 0;}.wrapper ul li .title{
position:absolute;
overflow:hidden;
width:100%;
height:100%;
left:0;
top:0;
background:rgba(0,0,0,0.5);}.wrapper ul li .title h1{
color:#fff;
width:30px;
margin:0 auto;
display:block;
font:20px;
padding-top:30px;
opacity:0.8;}.wrapper ul li .decration{
width:400px;
height:40px;
padding-left:20px;
padding-right:30px;
position:absolute;
left:0;
bottom:-50px;
background:rgba(0,0,0,0.3);
color:#FFF;}