经过这几天学习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中事件和动画的思维导图