思路：

和轮播类似，两层父元素，外层大小为可视的大小设置overflow：hidden即可，内层设置ul为li的总大小，li左浮动，剩下的子元素合理摆放；这样我们的html和css部分就完成了。然后到jq部分，jq就是获取li的jq对象，添加click或者hover事件，事件里面$（this）为事件当前里的对象，给当前对象添加动画→width设置为展开大小700px，其他兄弟添加动画→width设置为收缩大小100px

css：

*{margin: 0px;padding: 0px;}
			ul,li{list-style: none;}
			ul{width: 2800px;height: 380.5px;}
			li{position: relative;float: left;width: 100px;height: 100%;overflow:hidden;}
			li:last-child{position: relative;float: left;width: 700px;height: 100%;}
			.text{width: 100px;height: 100%;position:absolute;z-index: 5;background-color: rgba(0,0,0,0.8);}
			p{width: 14px;font-size: 14px;float: left;color: white;margin: 25px 0px 0px 25px;text-align: center;}
			div.pic{width:700px;height: auto;}
			img{width: 100%;vertical-align: middle;}

html：

<div id="main">
				<ul>
					<li>
						<div class="text">
						<p>作者··默默的墨墨</p>
						<p>我的个人拉萨之旅丨丨故事之城</p>
					</div>
					<div class="pic">
						<img src="imgs/1.jpg" >
					</div>
					</li>
					<li>
						<div class="text">
						<p>作者··默默的墨墨</p>
						<p>我的个人拉萨之旅丨丨故事之城</p>
					</div>
					<div class="pic">
						<img src="imgs/2.jpg" >
					</div>
					</li>
					<li>
						<div class="text">
						<p>作者··默默的墨墨</p>
						<p>我的个人拉萨之旅丨丨故事之城</p>
					</div>
					<div class="pic">
						<img src="imgs/3.jpg" >
					</div>
					</li>
					<li>
						<div class="text">
						<p>作者··默默的墨墨</p>
						<p>我的个人拉萨之旅丨丨故事之城</p>
					</div>
					<div class="pic">
						<img src="imgs/4.jpg" >
					</div>
					</li>
				</ul>
		</div>

js：

$("ul li").click(function(){
				$(this).stop(true).animate({width:"700px"},500).siblings().stop(true).animate({width:"100"},500);
			})