【jQuery】一个动画的例子

概述

jQuery最精彩的地方无异于它的动画了，这个例子是一个视频网站中的常用例子，类似于幻灯片方式展示多个视频，如下图所示。

网页的基础代码为：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

分析

主要技术难点就在于控制动画。将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

本文用菊子曰发布