经过这几天学习jQuery中的事件和动画，对jQuery更深的认识，接下来先把视频展示效果的代码贴出来，最后把我在学习jQuery事件和动画之后总结的思维导图

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>视频展示效果实例</title>

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>  <!--引入jQuery -->

<script type="text/javascript" >

$(function (){

 var page=1;                                   //初始化当前的版面数为1

	 var i=4;                                  // 每个版面有四张图片

	 $("span.next").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==$page_count){                //到达最后一个版面  如果再向后就跳到第一个版面

				  $v_show.animate({left: '15px'},"slow")    

				  page=1;                          //通过改变left值，跳转到第一版面

			  }else{

				  $v_show.animate({left: '-='+$v_width},"slow")

				  page++;                           //通过left值到达每次换一个版面

			  }

			   $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");

		     }   //  为了可以让高亮效果随着版面转换   我们要通过版面数来实现   因为版面的初始值是1开始，而高亮元素是从0开始所以在对应版面数时-1，当前元素添加高亮属性“current”，同辈下的元素移除样式“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");

		  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>

<style>

*{margin: 0; padding: 0;}

body{ font: normal 16px/1.5em  "微软雅黑", Verdana, Geneva, sans-serif;}

ul,li{ list-style: none;}

a{ text-decoration: none;}

img{ border: none;}

em{ font-style: normal;}

.fl{ float: left;}

.fr{ float: right;}

.v_show{ width: 502px; height: 198px; border: 1px solid red; background: #000; margin: 50px auto; overflow: hidden;}

.v_caption{ float: left; background: #ccc; color: #000; height: 40px; width: 100%; position: relative; overflow: hidden;}

.cartoon { font-size: 16px; line-height: 40px; text-indent: 15px; padding-right: 20px;  }

.v_caption .heightlight_tip{  width: 60px;}

.v_caption .heightlight_tip span{ background: url(../img/hover1.png) no-repeat center; width: 8px; height: 8px; border-radius: 4px; float: left;margin:16px 5px 0  0;}

.v_caption .heightlight_tip .current{ background: url(../img/hover.png) no-repeat center; }

.change_btn{ width: 290px; }

.change_btn .prev{ float: left; background: url(../img/prev.gif) no-repeat center ; width: 20px; height: 20px; margin-top: 10px;}

.change_btn .next{ float: left; background: url(../img/next.gif) no-repeat center; width: 20px; height: 20px; margin: 10px 0 0 1px;}

.v_caption em{ margin-top: 10px; text-align: center;  position: absolute; top: 0; right: 15px;}

.v_caption em a{ color: #000; text-decoration: none; line-height: 20px; display: block; font-size: 14px;}

.v_caption em a:hover{ color: #f60;}

.v_content{ clear: both; width: 502px; height: 145px; padding: 15px 15px 0 15px; overflow: hidden; position: relative; }

.v_content_list{ display: block; position: absolute; left: 15px; top: 15px;}

.v_content_list li{ float: left; width: 99px; height: 143px; margin-right: 25px; overflow: hidden; position: relative;}

.v_content_list li a{ display: block; width: 99px; height: 99px;}

.v_content_list .info{ position: absolute; left:0; top:103px;}

.v_content_list .info a { color: #fff; width: 99px; height: 16px;}

.v_content_list .info a:hover{ color: #f60;}

.v_content_list .info span{ color: #fff; font-size: 12px;}

</style>

</head>

<body>

<div class="v_show">

    <div class="v_caption">

    	<h2 class="cartoon fl" title="卡通动漫">卡通动漫</h2>

        <div class="heightlight_tip fl">

        	<span class="current"></span><span></span><span></span><span></span>

        </div>

        <div class="change_btn fl">

        	<span class="prev"></span>

            <span class="next"></span>

        </div>

        <em class="fl"><a href="#">更多>></a></em>

    </div>

    <div class="v_content">

    	<div class="v_content_list">

            <ul>

                <li><a href="#"><img src="img/1.jpg" width="100px" height="100px" alt="1"></a> <div class="info"><h4><a href="#">1</a></h4><span>播放：<em>28,618</em></span></div></li>

                <li><a href="#"><img src="img/2.jpg" width="100px" height="100px" alt="2"></a> <div class="info"><h4><a href="#">2</a></h4><span>播放：<em>27,377</em></span></div></li>

                <li><a href="#"><img src="img/3.jpg" width="100px" height="100px" alt="3"></a> <div class="info"><h4><a href="#">3</a></h4><span>播放：<em>28,618</em></span></div></li>

                <li><a href="#"><img src="img/4.jpg" width="100px" height="100px" alt="4"></a> <div class="info"><h4><a href="#">4</a></h4><span>播放：<em>27,377</em></span></div></li>

                 <li><a href="#"><img src="img/1.jpg" width="100px" height="100px" alt="1"></a> <div class="info"><h4><a href="#">1</a></h4><span>播放：<em>28,618</em></span></div></li>

                <li><a href="#"><img src="img/2.jpg" width="100px" height="100px" alt="2"></a> <div class="info"><h4><a href="#">2</a></h4><span>播放：<em>27,377</em></span></div></li>

                <li><a href="#"><img src="img/3.jpg" width="100px" height="100px" alt="3"></a> <div class="info"><h4><a href="#">3</a></h4><span>播放：<em>28,618</em></span></div></li>

                <li><a href="#"><img src="img/1.jpg" width="100px" height="100px" alt="1"></a> <div class="info"><h4><a href="#">1</a></h4><span>播放：<em>28,618</em></span></div></li>

                <li><a href="#"><img src="img/2.jpg" width="100px" height="100px" alt="2"></a> <div class="info"><h4><a href="#">2</a></h4><span>播放：<em>27,377</em></span></div></li>

                <li><a href="#"><img src="img/3.jpg" width="100px" height="100px" alt="3"></a> <div class="info"><h4><a href="#">3</a></h4><span>播放：<em>28,618</em></span></div></li>

                <li><a href="#"><img src="img/4.jpg" width="100px" height="100px" alt="4"></a> <div class="info"><h4><a href="#">4</a></h4><span>播放：<em>27,377</em></span></div></li>

                 <li><a href="#"><img src="img/1.jpg" width="100px" height="100px" alt="1"></a> <div class="info"><h4><a href="#">1</a></h4><span>播放：<em>28,618</em></span></div></li>

                <li><a href="#"><img src="img/2.jpg" width="100px" height="100px" alt="2"></a> <div class="info"><h4><a href="#">2</a></h4><span>播放：<em>27,377</em></span></div></li>

                <li><a href="#"><img src="img/3.jpg" width="100px" height="100px" alt="3"></a> <div class="info"><h4><a href="#">3</a></h4><span>播放：<em>28,618</em></span></div></li>

            </ul>

        </div>

    </div>

</div>

</body>

</html>

上面的效果图

下图就是自己总结jQuery中事件和动画的思维导图

jQuery中的事件和动画 以及视频展示效果实例的更多相关文章

  1. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  2. jQuery中的事件与动画<思维导图>

    Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...

  3. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  4. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  5. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  6. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  7. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  8. 第4章 jQuery中的事件和动画

    4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...

  9. 第3章 jquery中的事件和动画

    一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...

随机推荐

  1. kaggle Pipelines

    # Most scikit-learn objects are either transformers or models. # Transformers are for pre-processing ...

  2. Bootstrap 组件之 Nav

    一.简介 Nav 指导航页.这里 是一个线上例子. 使用了 .nav 的标签就是一个 Nav.下面举例. {注意} 记住,下面的几种导航页都依赖 .nav. 二.导航页 添加 .nav-tabs. & ...

  3. 基于jQuery的Tooltip

    近来,要开发一个关务管理系统,为了增加系统美观度,自己开发了一个基于jQuery框的的小插件,与大家分享一下,希望大家能给我提出宝贵修改意见. 下面开发说明使用方法和内容: 一.引用jQuery框架, ...

  4. AtCoder Grand Contest 011D（思维，规律，异或）

    #include<bits/stdc++.h>using namespace std;char s[200007];int ans[200007];int main(){    int n ...

  5. thinkphp 连接数据库 & 实例化模型操作 （下接thinkphp CURD 操作）/慕课

    7.1 连接数据库 (06:15) 1 7.2实例化模型 1 1.实例化基础模型 2 2. 实例化用户自定义模型 2 问题 2 3. 实例化公共模型 4 4. 实例化空模型 7    7.1 连接数据 ...

  6. redis启动后出现"WARNING you have Transparent Huge Pages (THP) support enabled in your kernel"问题

    问题描述:启动redis后出现:WARNING you have Transparent Huge Pages (THP) support enabled in your kernel. This w ...

  7. Oracle 11G R2在用EXP 导出时，空表不能导出解决办法

    11G中有个新特性,当表无数据时,不分配segment,以节省空间 解决方法: 1.insert一行,再rollback就产生segment了. 该方法是在在空表中插入数据,再删除,则产生segmen ...

  8. Redis学习笔记（2）—— Redis的安装和使用

    一.CentOS安装Redis 1.1 安装环境 redis是C语言开发的,安装redis需要先将官网下载的源码进行编译,编译依赖gcc环境.如果没有gcc环境,需要安装gcc: yum instal ...

  9. 图片滚动插件jquery bxslider

    https://www.cnblogs.com/axl234/p/4167196.html

  10. sublime中正则替换

    匹配 <header></header>  ,  “.” 是匹配任意 非 换行 符号 而  \s\S 匹配任何符号 匹配div class为navbar 的 div <d ...