手风琴效果

<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#outer{
				width:1000px;
				height: 450px;
				margin: 50px auto 0;
				overflow: hidden;
			}
			#outer div{
				width: 50px;
				height: 450px;
				float: left;
				overflow: hidden;
			}
			#outer img{
				width: 800px;
				height: 450px;
				
				
			}
			#outer #show{
				width: 800px;
			}
		</style>

　　

<div id="outer">
			<div id="show"><img src="img/1.jpg" alt="" /></div>
			<div><img src="img/10.jpg" alt="" /></div>
			<div><img src="img/11.jpg" alt="" /></div>
			<div><img src="img/12.jpg" alt="" /></div>
			<div><img src="img/2.jpg" alt="" /></div>
		</div>

　　

<script src="js/jquery-2.2.1.min.js"></script>
		<script>
			$("#outer>div").click(function(){
				
				$(this).stop().animate({"width":"800"},500);
				$(this).siblings().stop().animate({"width":"50"},500);
			})
				
			
		</script>

　　

转载于:https://www.cnblogs.com/mingjixiaohui/p/5254951.html