jQuery学习笔记——视频展示效果示例

71 阅读 0 评论 47 点赞

我是靠谱客的博主优秀花瓣，最近开发中收集的这篇文章主要介绍jQuery学习笔记——视频展示效果示例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!--
	作者：1377378268@qq.com
	时间：2017-08-13
	描述：视频展示效果实例
-->
<!DOCTYPE HTML>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> </title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
		    var page = 1;
		    var i = 4; //每版放4个图片
		    //向后 按钮
		    $("span.next").click(function(){    //绑定click事件
			     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"); //通过改变left值，跳转到第一个版面
						page = 1;
					  }else{
						$v_show.animate({ left : '-='+v_width }, "slow");  //通过改变left值，达到每次换一个版面
						page++;
					 }
					$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
				 }
		   });
		    //往前 按钮
		    $("span.prev").click(function(){
			     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>

</head>

	<body>
	
		<div class="v_show">
			<div class="v_caption">
				<h2 class="cartoon" title="卡通动漫">卡通动漫</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><a href="#">更多>></a></em>
			</div>
			<div class="v_content">
				<div  class="v_content_list">
					<ul>
						<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
						<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
						<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
						<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
						<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
						<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
						<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
						<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
						<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
						<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
						<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
						<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
						<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
						<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
						<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
						<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				     </ul>
				</div>
			</div>
		</div>	
	</body>
</html>

效果