概述
jQuery最精彩的地方无异于它的动画了，这个例子是一个视频网站中的常用例子，类似于幻灯片方式展示多个视频，如下图所示。
网页的基础代码为：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </< span>title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></< span>script>
</< span>head>
<body>
<div class="v_show">
<div class="v_caption">
<h2 class="cartoon" title="卡通动漫">卡通动漫</< span>h2>
<div class="highlight_tip">
<span class="current">1</< span>span><span>2</< span>span><span>3</< span>span><span>4</< span>span>
</< span>div>
<div class="change_btn">
<span class="prev" >上一页</< span>span>
<span class="next">下一页</< span>span>
</< span>div>
<em><a href="#">更多>></< span>a></< span>em>
</< span>div>
<div class="v_content">
<div class="v_content_list">
<ul>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></< span>a><h4><a href="#">海贼王</< span>a></< span>h4><span>播放:<em>28,276</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></< span>a><h4><a href="#">海贼王</< span>a></< span>h4><span>播放:<em>28,276</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></< span>a><h4><a href="#">海贼王</< span>a></< span>h4><span>播放:<em>28,276</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></< span>a><h4><a href="#">海贼王</< span>a></< span>h4><span>播放:<em>28,276</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></< span>a><h4><a href="#">哆啦A梦</< span>a></< span>h4><span>播放:<em>33,326</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></< span>a><h4><a href="#">哆啦A梦</< span>a></< span>h4><span>播放:<em>33,326</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></< span>a><h4><a href="#">哆啦A梦</< span>a></< span>h4><span>播放:<em>33,326</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></< span>a><h4><a href="#">哆啦A梦</< span>a></< span>h4><span>播放:<em>33,326</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></< span>a><h4><a href="#">火影忍者</< span>a></< span>h4><span>播放:<em>28,276</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></< span>a><h4><a href="#">火影忍者</< span>a></< span>h4><span>播放:<em>28,276</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></< span>a><h4><a href="#">火影忍者</< span>a></< span>h4><span>播放:<em>28,276</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></< span>a><h4><a href="#">火影忍者</< span>a></< span>h4><span>播放:<em>28,276</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></< span>a><h4><a href="#">龙珠</< span>a></< span>h4><span>播放 <em>57,865</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></< span>a><h4><a href="#">龙珠</< span>a></< span>h4><span>播放 <em>57,865</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></< span>a><h4><a href="#">龙珠</< span>a></< span>h4><span>播放 <em>57,865</< span>em></< span>span></< span>li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></< span>a><h4><a href="#">龙珠</< span>a></< span>h4><span>播放 <em>57,865</< span>em></< span>span></< span>li>
</< span>ul>
</< span>div>
</< span>div>
</< span>div>
</< span>body>
</< span>html>
分析
主要技术难点就在于控制动画。将next和prev按钮绑定上动画，动画通过语句：
$("div.v_content_list").animate({left:'-='+v_width},"slow");
来控制（向右），以及
$("div.v_content_list").animate({left:'+='+v_width},"slow");
来控制（向左），同时要考虑移动到最后一屏时要返回第一页或者第一页向左移动要直接到达最后一页。同时还要克服动画队列的问题（鼠标不再点击，动画却依然在播放，这时之前动画的累计效果），解决办法是每次触发动画前都要检测动画是否在运行。
主要jQuery代码如下：
$(document).ready(function(){
var page=1;
var i=4;
$("span.next").click(function(){
//alert('test');
var v_width=$("div.v_content").width();
var len=$("div.v_content_list").find("li").length;
var page_count=Math.ceil(len/i);
//alert(length);
if(!$("div.v_content_list").is(":animated")){
if(page==page_count){
$("div.v_content_list").animate({left:'0px'},"slow");
page=1;
}
else{
page++;
$("div.v_content_list").animate({left:'-='+v_width},"slow");
}}
$("div.highlight_tip").find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
//$("div.v_content_list").fadeTo(600,0.2);
});
$("span.prev").click(function(){
//alert('test');
var v_width=$("div.v_content").width();
var len=$("div.v_content_list").find("li").length;
var page_count=Math.ceil(len/i);
//alert(length);
if(!$("div.v_content_list").is(":animated")){
if(page==1){
$("div.v_content_list").animate({left:'-='+v_width*(page_count-1)},"slow");
page=page_count;
}
else{
page--;
$("div.v_content_list").animate({left:'+='+v_width},"slow");
}}
$("div.highlight_tip").find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
//$("div.v_content_list").fadeTo(600,0.2);
});
}
)
演示文件
下载地址：https://files.cnblogs.com/xweiwei/jQuery%E5%9B%BE%E7%89%87%E6%BB%9A%E5%8A%A8%E6%95%88%E6%9E%9C.rar