任务视频V2.0
任务视频V1.0
知识点
自定义动画方法animate()
自定义动画方法animate()可以理解为JQuery动画的一个扩展，可以根据自己的需要定制各种不同的动画以满足任务的需求。animate()方法的基本语法如下：
$(selector).animate({params}，speed，callback);
其中，params为必选参数，不可缺省，用来定义CSS用于动画效果的属性，如位置（left或top属性）、高度（height）、宽度（width）、透明度（opacity）等，需使用“{}”括起来。
speed为可选参数，给出了动画变化的时间，可使用"slow"、"fast"、"normal"或是毫秒数。
callback为回调函数，可以省略，在animate()方法结束后调用。
停止元素的动画
网页中有时需要停止匹配元素正在进行的动画，这时要使用停止元素的动画方法stop()，它的语法结构为：
stop([clearQueue]，[gotoEnd]);
参数clearQueue 和 gotoEnd 都为可选参数，为布尔值，即true或false，默认值都是false。clearQueue 代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的那个动画跳转到末状态，而非动画队列中最后一个动画的末状态。由于clearQueue 和 gotoEnd 都为可选参数，那么stop()方法就有以下几种应用方法。
第一种是两个参数都为false的情况，即stop(false，false)，由于false是缺省值，因此也可简写为stop()。它表示不将正在执行的动画跳转到末状态，不清空动画队列，也就是说，停止当前动画，并从目前的动画状态开始动画队列中的下一个动画。
第二种是第一个参数为true的情况，即stop(true，false)，由于false是缺省值，因此也可简写为stop(true)。它表示不将正在执行的动画跳转到末状态，但清空动画队列，也就是说，停止所有动画，保持当前状态，瞬间停止。
第三种是第二个参数为true的情况，即stop(false，true)，它表示不清空动画队列，将正在执行的动画跳转到末状态，也就是说，停止当前动画，跳到当前动画的末状态，然后进入队列中的下一个动画。
第四种是两个参数都为true的情况，即stop(true，true)，它表示既清空动画队列，又将正在执行的动画跳转到末状态。也就是说停止所有动画，跳到当前动画的末状态。
制作图片横向移动效果
任务描述
图片横向移动效果，如图所示，默认显示第1个版面，共4个版面。用户可以单击左上角的左右箭头来控制图片的左右滚动。当单击向右箭头时，图片向左移动，显示下一个版面。当展示内容已经是最后一个版面时，如果再向后，就应该跳转到第一个版面。单击向左的箭头，显示上一个版面，当展示内容已经是第一个版面时，如果再向前，就应该跳转到最后一个版面。左上角箭头旁边的蓝色圆点应该与动画一起切换，它代表着当前所处的版面。
任务分析
具体的实现步骤如下：
设计页面HTML结构，应用CSS样式。
HTML、CSS与jQuery的有机结合很重要。jQuery可灵活控制HTML元素的增加、修改、删除、查找，也可控制HTML元素的CSS样式的变化，如位置、可见性、颜色等。
通过jQuery选择器获取“向右箭头”，为其绑定click事件。
获取要控制的“图片内容所在的DIV元素”（class属性为"v_content_list"）和“图片展示区域的DIV元素”（class属性为"v_content"）。
通过控制“图片内容所在的DIV元素”的left属性值来改变其水平位置，以一个版面的宽度为单位进行变化。
当动画到最后一个版面或者第一个版面时，“图片内容所在的DIV元素”的left属性值的特殊设置。
左上角的箭头旁边的蓝色圆点需随动画一起切换，来标识当前所处的版面。结果HTML代码和CSS代码来实现。
当用户单击“向右箭头”或“向左箭头”过快时，动画累积，导致动画效果与用户操作不一致。因此，新动画需要在元素不处于动画状态时再添加。
任务实现
把页面结构设计好，可以把HTML结构简化成如下形式：
<div>
<divclass="v_caption">
//头部标题、按钮等
</div>
<divclass="v_content"> //该div是图片内容展示区域
<div class="v_content_list">
//该div是要展示的图片内容
</div>
</div>
</div>
最终实际页面的HTML代码如下：
<div>
<divclass="v_caption">
<h2>卡通动漫</h2>
<div>
<spanclass="current">1</span><span>2</span><span>3</span><span>4</span>
</div>
<div>
<spanclass="prev">上一页</span>
<spanclass="next">下一页</span>
</div>
<p><a href="#">更多>></a></p>
</div>
<divclass="v_content">
<div class="v_content_list">
<ul>
<li><ahref="#"><imgsrc="img/01.jpg"/></a></li>
……中间的li元素省略……
<li><ahref="#"><img src="img/04.jpg"/></a></li>
</ul>
</div>
</div>
</div>
$("span.next").click(function(){ //“向右箭头”绑定单击事件
var page = 1; //默认当前版面数是1
var i=4; //每个版面放4幅图片
var $parent =$(this).parents("div.v_show"); //根据当前元素获取祖先元素
var $v_show =$parent.find("div.v_content_list"); //获取“图片内容所在的DIV元素”
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") ){ //若“图片内容所在的DIV元素”没有处于动画状态
if(page == page_count){ //已经是最后一个版面，再向后必须跳转到第1版面
$v_show.animate({left:'0px'}，"normal"); //改变left值，跳转到第1版面
page = 1; //当前版面数设置为1
}else{
$v_show.animate({left:'-='+v_width}，"normal"); //改变left值，跳转到下一版面
page++; //当前版面数加1
}
$parent.find("span").eq((page-1)).addClass("current")
.siblings().removeClass("current");
}
});
代码运行后，单击“向右箭头”，效果一切正常。此时已经把“向右箭头”的交互效果完成了。单击“向左箭头”的交互代码与“向右”类似，区别是在当前版面数已经为第1版的时候，如果再单击“向左箭头”，则需要把版面跳转到最后一个版面，代码如下：
if( !$v_show.is(":animated") ){ //若“图片内容所在的DIV元素”没有处于动画状态
if(page == 1){ //已经是第1个版面，再向前必须跳转到最后一个版面
$v_show.animate({ left : '-='+v_width*(page_count-1) }， "normal");
page = page_count;
}else{
$v_show.animate({left:'+='+v_width}，"normal");
page--;
}
}
此时，图片横向左右移动的效果就完成了，当前版面也能够标识。
