1.jQuery部分代码如下

<script type="text/javascript">

$(function(){

    var page = 1;

    var i = 4; //每版放4个图片

    //向后 按钮

    $("span.next").click(function(){    //绑定click事件

         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 : '0px'}, "slow"); //通过改变left值，跳转到第一个版面

                page = 1;

              }else{

                $v_show.animate({ left : '-='+v_width }, "slow");  //通过改变left值，达到每次换一个版面

                page++;

             }

            $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("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"); //寻找到“视频内容展示区域”外围的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 == 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>

一些细节问题：

1.1元素都应该加上引号，如在parents、find以及$（）中；

1.2 width()需要加（），length不用；

1.3Math首字母大写；

1.4addClass驼峰写法；

2.HTML部分：

<body>

<div class="v_show">

    <div class="v_caption">

        <h2 class="cartoon" title="卡通动漫">卡通动漫</h2>

        <div class="highlight_tip">

            <span class="current">1</span><span>2</span><span>3</span><span>4</span>

        </div>

        <div class="change_btn">

            <span class="prev" >上一页</span>

            <span class="next">下一页</span>

        </div>

        <em><a href="#">更多>></a></em>

    </div>

    <div class="v_content">

        <div  class="v_content_list">

            <ul>

                <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>

                <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>

                <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>

                <li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>

                <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>

                <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>

                <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>

                <li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>

                <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>

                <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>

                <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>

                <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>

                <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

                <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

                <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

                <li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>

             </ul>

        </div>

    </div>

</div>

</body>

【jQuery】动画小练习的更多相关文章

  1. JQuery 动画及一些小知识点

    JQuery  动画 show(),hide()显示/隐藏slideDown(),slideUp() 拉开/合起fadeIn(),fadeOut()渐出/渐入自定义动画 animate({left:& ...

  2. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  3. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  4. jQuery动画使用总结

    jQuery动画我用的比较多的仅仅只有show和hide,但是作为一个被我们大多数人所熟知的框架,相信他的动画功能还是比较多样的,这里做个小总结. 1.jQuery animate(),用于创建自定义 ...

  5. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  6. jquery 动画总结（主要指效果函数）

    动画无非两类:帧动画frame和变形动画tween,以及3d动画.不论web还是安卓苹果app,动画原理都是这些. web app 动画实现的途径,无非这几种:1 gif动画---这就是帧动画,把若干 ...

  7. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...

  8. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  9. jquery动画，基础以及我发现的新大陆

    $.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...

  10. 让网站动起来！12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

随机推荐

  1. nodejs文件上传组件multer使用

    多图上传,发送端: var express = require('express') var rp = require('request-promise') var fs = require(&quo ...

  2. Spring动态注册bean实现动态多数据源

    Spring动态注册bean实现动态多数据源 http://blog.csdn.net/littlechang/article/details/8071882

  3. windows 下运行 tomcat

    本节是以 tomcat 7.0 为例,描述在 windows 系统上从下载到运行 tomcat 的步骤 https://tomcat.apache.org/download-70.cgi 下载后解压缩 ...

  4. POJ 1006 Biorhythms --中国剩余定理（互质的）

    Biorhythms Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 103539   Accepted: 32012 Des ...

  5. bnu 29378 Adidas vs Adivon 基础题

    Adidas vs Adivon Time Limit: 1000ms Memory Limit: 65536KB   64-bit integer IO format: %lld      Java ...

  6. unity3d之简单的时钟倒计时demo

    输入结束时间,开始倒计时,时间差不超过一天,附上代码:(关于个位数显示,加个判断如果小于10 显示的字符串加上0) using System.Collections; using System.Col ...

  7. 线程与全局解释器锁（GIL）

    一.线程概论 1.何为线程 每个进程有一个地址空间,而且默认就有一个控制线程.如果把一个进程比喻为一个车间的工作过程那么线程就是车间里的一个一个流水线. 进程只是用来把资源集中到一起(进程只是一个资源 ...

  8. CF891E Lust

    传送门 题目大意 你有 \(n\) 个数 \(a_1,a_2...a_n\) 要进行 \(k\) 次操作 每次随机选择一个数 \(x\),使得答案加上 \(\prod_{i \neq x}a_i\) ...

  9. BZOJ2960：跨平面

    题面 BZOJ Sol 对该平面图的对偶图建图后就是最小树形图,建一个超级点向每个点连 \(inf\) 边即可 怎么转成对偶图,怎么弄出多边形 把边拆成两条有向边,分别挂在两个点上 每个点的出边按角度 ...

  10. drupal7 转化 public:// 为实际url

    file_create_url('public://xxx.png'); // 得到URL drupal_realpath('public://xxx.png'); // 得到系统路径(磁盘路径,如D ...