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

2022-10-23 11:06:51
<!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>
码农公寓

相关文章
