<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.block{
height:400px;
width:1000px;
margin:30px auto;
position:relative;
}
.center{
width:50px;
height:400px;
box-shadow: 0 0 2px silver;
position:absolute;
list-style: none;
}
.center>img{
position: absolute;
width:100%;
height:0;
left:0;
top:50%;
opacity: 0;
/*opacity 透明度0的时候完全透明，为1的时候完全不透明*/
}
.center:nth-child(4) img{
opacity: 1;
top:0;
}
.center>span{
display: inline-block;
position:absolute;
width:100%;
height:100%;
text-align: center;
}
</style>
</head>
<body>
<div class="block">
<ul>
<li class="center">
<span>一</span><img src="t1.png" alt=""/>
</li>
<li class="center"> <span>二</span><img src="t2.png" alt=""/></li>
<li class="center"> <span>三</span><img src="t3.png" alt=""/></li>
<li class="center"> <span>四</span><img src="t4.png" alt=""/></li>
<li class="center"> <span>五</span><img src="t5.png" alt=""/></li>
<li class="center"> <span>六</span><img src="t6.png" alt=""/></li>
<li class="center"> <span>七</span><img src="t7.png" alt=""/></li>
</ul>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(function(){
//创建点击事件
$(".center").each(function(index){
$(this).click(function(){
method(index);
})
});
method(3);//将第四个图片的索引放进去
//创建方法，设置每个li的位置及图片样式还有行高
function method(index){
//三种情况 第一种：当前索引值等于传入的值
//第二种：当前索引值小于传入值，放在左边
//第三种：当前索引值大于传入值，放在右边
$(".center").each(function(now){
if(index==now){
//设置当前索引的框框宽度为700，高度为400
$(this).stop().animate({
left:index*50,
top:0,
width:700,
height:400
},300).find("span").css({
//设置当前index的行高为400，目的让其元素居中
lineHeight:400+"px"
}).parent().children("img").animate({
//自定义图片，为其设置高，并将其透明度转化为1，也就是让其变为不透明
height:400,
opacity: 1,
top:0
},300)
}
//在中间图片的左端位置时候样式设置
else if(now<index){
$(this).stop().animate({
left:now*50,
top:((index-now)*25)/2,
height:400-(index-now)*25,
width:50
},300).find("span").css({
lineHeight:400-(index-now)*25+"px"
}).parent().children("img").animate({
height:0,
opacity: 0,
top:"50%"
},300)
}
//在中间图片右边的时候的样式设置
else{
$(this).stop().animate({
width:50,
top:(now-index)*(25/2),
height:400-(now-index)*25,
left:(now*50)+650
},300).find("span").css({
lineHeight:400-(now-index)*25+"px"
}).parent().children("img").animate({
height:0,
opacity:0,
top:"50%"
},300)
}
})
}
})
</script>
</body>
</html>
实现效果：
