经过这几天学习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. js中使用Java的方式

    1. 使用DWR框架 2. 使用AJAX方式

  2. gRPC官方文档(gRPC基础：C++)

    文章来自gRPC 官方文档中文版 本教程提供了C++程序员如何使用gRPC的指南. 通过学习教程中例子,你可以学会如何: 在一个 .proto 文件内定义服务. 用 protocol buffer 编 ...

  3. Git master branch has no upstream branch的解决

    Git master branch has no upstream branch的解决 在push代码时,出现“git master branch has no upstream branch”问题的 ...

  4. python内存相关问题

    想要弄清楚内存相关的问题,就要理清楚:变量.内存地址.值之间的关系:1.程序里什么时候分配新的内存地址?答:1.定义一个变量,内存就开辟一个内存空间,分配一个内存地址. 特殊: 如:a=687 a=1 ...

  5. 关于dubbo服务的xml配置文件报错的问题——The matching wildcard is strict, but no declaration can be found for element 'dubbo:application'

    在配置dubbo服务的过程中,经常会遇到虽然程序能够跑起来,但是配置文件一堆红叉,虽然不影响功能,但是确实很让人恶心. 报错信息如下: 解决方案: 下载一个dubbo.xsd文件(就在dubbo.ja ...

  6. C++_静态类成员

    在C++中,静态成员是属于整个类的而不是某个对象. 静态成员变量只存储一份供所有对象共用,所以在所有对象中都可以共享它. 使用静态成员变量实现多个对象之间的数据共享不会破坏隐藏的原则,保证了安全性还可 ...

  7. Kibana6.2.x 插件理解

    官方地址:https://www.elastic.co/guide/en/kibana/current/development-uiexports.html Type Purpose hacks An ...

  8. SVN更改通知的工具commitmonitor

    SVN更改通知的工具commitmonitor 下载地址: https://sourceforge.net/projects/commitmonitor/files/latest/download 工 ...

  9. opencv-将分离合并图像（Red通道>125置255<=置0）

    #include <iostream> #include <opencv2/opencv.hpp> #include "opencv2/imgproc/imgproc ...

  10. d题

    #include<iostream>#include<algorithm>using namespace std;int a[200005];int b[200005];int ...