先来个简单的

HTML代码：

<div class="nav content">
		    <ul class="clearfix nav">
		    	<li class="actv">路飞</li>
		    	<li>索罗</li>
		    	<li>罗宾</li>
		    	<li>娜美</li>
		    	<li>乌索普</li>
		    </ul>
			<div class="img">
				<img class="tive" src="http://imgsrc.baidu.com/forum/pic/item/8ce23bc79f3df8dc20386c84cd11728b47102848.jpg">
				<img  src="http://imgsrc.baidu.com/forum/pic/item/373e49540923dd54a108227dd109b3de9c82485e.jpg">
				<img  src="http://imgsrc.baidu.com/forum/pic/item/707994eef01f3a29c6c250db9925bc315c607c4f.jpg">
				<img  src="http://imgsrc.baidu.com/forum/pic/item/2c3b0924ab18972be14e85dfe6cd7b899e510a58.jpg">
				<img  src="http://imgsrc.baidu.com/forum/pic/item/922b1d950a7b02080cbebaf462d9f2d3572cc85a.jpg">
			</div>
	</div>

<style type="text/css">
	*{margin: 0;padding:0 ;box-sizing: border-box;}
		.content{width:800px;height:900px;margin: 0 auto;overflow: hidden;}
		ul,li{list-style: none;}
		.clearfix:after{clear:both;content: "";display:block;}
		li{float:left;width:160px;height: 100px;text-align: center;line-height: 100px;background-color: yellow;border:1px solid red;font-size: 24px;}
		.actv{background: blue;}
		.img{position:relative;width:800px;height:800px;}
		.img img{width:800px;height:800px;position: absolute;left: 0;top: 0;display: none;}
		.img .tive{display: inline;}
	</style>

JS代码：

<script type="text/javascript">
		$(function(){
			function goWhat(n){
				 $('.nav li').eq(n).on('click',function(){
                 $(this).addClass('actv').siblings('li').removeClass('actv')
                 Show(n);
			});
			}
			function Show(n){
				$('.img img').eq(n).show(1000).siblings('img').hide(1000);
				
			}
			for(var i=0;i<5;i++){
				goWhat(i);

			}
			
		})
	</script>