`

视频展示效果实例

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="../../scripts/jquery.js" type="text/javascript"></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>
Math.ceil方法向上取整,然后去掉数字的小数部分,即5.02将变为6,因为6是最接近原数且大于原数的数字。
分享到:
评论

相关推荐

    jQuery视频展示效果实例

    简单地模仿某视频网的视频展示效果,单击左右箭头切换视频展示版面,使用jQuery完成,博客地址https://blog.csdn.net/chenyonken/article/details/80972665

    matlab图像视频处理及实例

    《MATLAB图像视频处理应用及实例》是一本深入探讨MATLAB在图像和视频处理领域的专著,适合初学者和有一定基础的读者。本书详细讲解了MATLAB如何进行图像和视频的处理,包括基本操作、算法实现以及实际应用案例,旨在...

    Premiere Pro CC中文版影视编辑实例教程视频教程下载第4章 视频效果应用实例.zip

    在本套"Premiere Pro CC中文版影视编辑实例教程视频教程下载第4章 视频效果应用实例"中,我们将深入探讨Adobe Premiere Pro这款强大的非线性视频编辑软件中的视频效果应用。这是一份专为自学爱好者设计的教程,旨在...

    ansys实例分析视频教程

    本教程通过具体的实例,详细展示了ANSYS在解决各种工程问题时的功能和步骤,涵盖了结构力学、流体力学、热力学等多个领域。 首先,我们要理解ANSYS是什么。ANSYS是一款全球领先的多物理场仿真软件,它允许工程师对...

    《Premiere短视频制作实例教程全彩慕课版》_全书PPT.rar

    《Premiere短视频制作实例教程全彩慕课版》是一份专为初学者和进阶者设计的全面学习资源,旨在帮助读者掌握Adobe Premiere Pro这款强大的视频编辑软件。本教程通过全彩PPT的形式,生动直观地展示了短视频创作的全...

    Openlayers实例详解视频教程

    总的来说,OpenLayers实例详解视频教程将带你全面了解OpenLayers的功能和用法,无论你是GIS开发者还是前端工程师,都能从中受益,提升你在地图应用开发领域的技能。记住,实践是检验学习效果的最佳方式,所以边学边...

    Qt5开发实例在线视频二维码.rar

    由于资源是通过二维码提供的在线视频,这表明教程可能以直观的方式展示每个步骤,便于初学者理解和模仿。这种形式的学习通常比阅读文档更生动,更容易吸引学习者的注意力。只需用手机扫描二维码,无论何时何地,都能...

    小程序豆瓣视频实例

    在这个实例中,开发者可能通过调用豆瓣的视频API来获取并显示相关视频信息。 7. **JSON数据解析**:获取到的API数据通常是JSON格式,JavaScript可以方便地解析和操作这种数据,将它们转化为小程序可以展示的结构。 ...

    动画视频_窗口动态视频实例_动画_

    在压缩包中的"CTest02"可能是一个示例程序或代码库,用于展示如何实现上述的窗口动态视频效果。它可能包含源代码、资源文件、编译脚本等,供开发者参考学习。通过研究这个实例,我们可以更直观地了解动态窗口动画的...

    jQuery实现超炫效果的实例源码

    文章标题“jQuery实现超炫效果的实例源码”透露出内容将围绕jQuery的强大功能展开,具体分析以下几个实例的源码,帮助开发者提升网站的视觉吸引力和用户体验。 首先,从描述内容中我们知道,使用jQuery插件是提升...

    视频拍照vfp实例源码

    标题“视频拍照vfp实例源码”表明我们要讨论的是一个使用VFP编写的程序,它能够捕获视频帧并进行拍照操作。这种功能通常涉及到多媒体编程,特别是与摄像头设备的交互,以及图像处理技术。 描述中提到,“调用相头...

    短视频实例_android

    【短视频实例——Android开发详解】 在移动互联网时代,短视频应用已经成为用户日常娱乐和信息获取的重要途径,其中微信短视频更是以其简洁高效的设计深受喜爱。本文将深入探讨如何在Android平台上开发一款类似微信...

    Android 视频背景,动态背景,登陆或首页的视频 背景实例源码下载

    在Android应用开发中,视频背景是一个独特且引人入胜的设计元素,它可以为登录页面、首页或其他界面增添动态效果,提升用户体验。本实例源码主要实现了将视频作为应用背景的功能,支持自动拉伸以适应不同屏幕尺寸,...

    Android视频实时采集和播放实例

    创建实例后,通过`setDataSource()`设置视频源,然后调用`prepare()`或`prepareAsync()`进行初始化。 2. 视频渲染:与视频采集不同,播放视频时通常不需自己处理图像数据。`MediaPlayer`会自动将视频流渲染到指定的...

    flash实例 动画效果

    本压缩包文件"动画效果"包含了若干个Flash实例,这些实例可能是为了展示不同的动画技巧、过渡效果或者互动元素。 首先,我们要理解Flash动画的基本原理。Flash基于帧的概念,通过在时间轴上逐帧创建和编辑内容来...

    android开发实例大全_王东华

    全书分为18章,分别讲解了UI布局实例集锦、控件实例集锦、自动化服务实例集锦、数据存储实例集锦、电话和短信实例集锦、图形图像实例集锦、和网络有关的实例集锦、多媒体实例集锦、Google地图实例集锦、GoogleAPI...

    Inventor 2014产品设计经典实例视频教程下载实例16 基座.zip

    8. **渲染与动画**:展示如何为模型添加材质和光照,创建逼真的渲染效果,以及制作基座的动态展示。 9. **文件管理和版本控制**:介绍如何保存、备份和版本控制设计文件,确保设计过程的可追溯性。 通过这个视频...

    Premiere Pro 2021视频编辑实例源程序代码

    《Premiere Pro 2021视频编辑实例源程序代码》是针对Adobe Premiere Pro这一专业视频编辑软件的实践教程资源。此压缩包包含了2021版本的项目文件,为学习者提供了丰富的视频编辑实例,旨在帮助用户深入理解和掌握这...

Global site tag (gtag.js) - Google Analytics