jq demo—图片翻页展示效果 animate()动画

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<style type="text/css">
html,h2,h4,ul,li{margin:0;padding:0;}
ul,li{list-style:none;}
.v_show{
	border:1px solid #aaa;
	margin:0 auto;
	width:520px;
}
.v_caption{
	height:30px;
	line-height:30px;
	border-bottom:1px solid #dfdfdf;
	overflow:hidden;
	position:relative;
}
.v_caption h2{
	float:left;
	font-size:16px;
}
.v_caption em{
	position:absolute;
	right:0;
	top:0;
}
.highlight_tip{
	float:left;
}
.highlight_tip span{
	background:#ddd;
	display:inline-block;
	width:8px;
	height:8px;
	margin-right:2px;
	border-radius:4px;
	text-indent:-99px;
	overflow:hidden;
	cursor:pointer;
}
.highlight_tip .current{
	background:#fc0;
}
.change_btn span{
	cursor:pointer;
}
.v_content{
	height:210px;width:100%;
	overflow:hidden;
}
.v_content_list{
	position:relative;  //关键，否则js的left属性会无效
}
.v_content_list ul{
    display:flex;
    width: 100%;
}
.v_content_list li{
    flex:initial;  //元素要在一行显示
    min-width:120px;
	margin:10px 10px 10px 0;
}
.v_content_list img{
	width:120px;
	height:150px;
}
</style>

<body>
<div class="v_show">
	<div class="v_caption">
		<h2>卡通动漫</h2>
		<div class="highlight_tip">
			<span class="current">1</span><span>2</span><span>3</span><span>4</span>
		</div>
		<div class="change_btn">
			<span class="prev">上一页</span>
			<span class="next">下一页</span>
		</div>
		<em>更多视频 >> </em>
	</div>
	<div class="v_content">
		<div class="v_content_list">
			<ul>
			<li>
				<img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" />
				<h4>二次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" />
				<h4>二次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" />
				<h4>二次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://imgsrc.baidu.com/baike/pic/item/d62a6059252dd42a030b1603063b5bb5c9eab813.jpg" />
				<h4>二次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" />
				<h4>二次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img5.duitang.com/uploads/item/201601/03/20160103122443_WkuKF.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img5.duitang.com/uploads/item/201512/22/20151222104520_RxdrP.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img5.duitang.com/uploads/item/201512/22/20151222104520_RxdrP.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img5.duitang.com/uploads/item/201512/22/20151222104520_RxdrP.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
			<li>
				<img src="http://img4.duitang.com/uploads/item/201608/02/20160802142223_SeYGj.thumb.700_0.jpeg" />
				<h4>四次元播放</h4>
				<span>播放:<em>7777</em></span>
			</li>
		</ul>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
	var page=1;
	var i=4;
	$("span.next").click(function(){
		$this=$(this);
		var $parent=$this.parents("div.v_show");
		var $v_show=$parent.find("div.v_content_list"); //视频展示区域
		var $v_content=$parent.find("div.v_content");   //视频展示区域外围div
		var v_width= $v_content.width();
		var len=$v_show.find("li").length;
		var page_count=Math.ceil(len/i);  //向上取整
		if(!$v_show.is(":animated")){ //是否处于动画状态
			//是否已经是最后一个版面，是直接跳到第一版
			if(page==page_count){
				$v_show.animate({left:'0px'},"slow");
				page=1;
			}else{
				$v_show.animate({left:'-='+v_width},"slow");
				page++;
			}
			$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
		}
	});
	$("span.prev").click(function(){
		$this=$(this);
		var $parent=$this.parents("div.v_show");
		var $v_show=$parent.find("div.v_content_list"); //视频展示区域
		var $v_content=$parent.find("div.v_content");   //视频展示区域外围div
		var v_width= $v_content.width();
		var len=$v_show.find("li").length;
		var page_count=Math.ceil(len/i);  //向上取整
		if(!$v_show.is(":animated")){ //是否处于动画状态
			if(page==1){
				$v_show.animate({left:'-='+v_width*(page_count-1)},"slow");
				page=page_count;
			}else{
				$v_show.animate({left:'+='+v_width},"slow");
				page--;
			}
			$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
		}
	});
})
</script>

</body>
</html>