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. centos文件/文件夹操作-检查磁盘、内存、cpu使用情况-vi操作命令

    Part1:CentOS文件/文件夹操作 1.新建文件夹 即创建目录 mkdir 文件名 新建一个名为test的文件夹在home下 vi source1 mkdir /home/test 注意:当创建 ...

  2. ios开发 学习积累20161027~20161031

    前言 学习ios这几天来,总结下,函数的定义,调用.跟其他语言都有一定的区别: 几个特别重要的就是对象的迭代的使用和判断.取随机数.动画的实现及数组的深入研究等等 之前的总结地址 ios开发 学习积累 ...

  3. Java求一个数组中的最大值和最小值

    原创作品,转载请注明出处:https://www.cnblogs.com/sunshine5683/p/9927186.html 今天在工作中遇到对一个已知的一维数组取出其最大值和最小值,分别用于参与 ...

  4. HDU 2546（01背包）

    http://acm.hdu.edu.cn/showproblem.php?pid=2546 http://blog.csdn.net/xujinsmile/article/details/79694 ...

  5. centos 6无法上外网

    1.先配置/etc/sysconfig/network-scripts/ifcfg-eth0 配置完成后能ping通内网.网关,但是上不了外网 DEVICE=eth0 HWADDR=:0C::FF:: ...

  6. 粘性页脚 Sticky Footer 最佳方式

    前段时间工作中遇到粘性页脚的需求,以前用过JS控制过,最后发现flex布局是解决这类问题的好帮手. 粘性页脚:即使没有足够的内容填充页面,也要将页脚固定到窗口的底部. <!DOCTYPE htm ...

  7. Luogu4887 第十四分块(前体)

    sto \(lxl\) orz 考虑莫队,每次移动端点,我们都要询问区间内和当前数字异或有 \(k\) 个 \(1\) 的数字个数 询问 \([l,r]\) 可以再次离线,拆成询问 \([1,l-1] ...

  8. Cloud Computing Causing Digital Business Transformation

    2015-04-13 Cloud Computing Causing Digital Business Transformation We hear all about the cloud, and  ...

  9. Android的第一个程序

    摘要:对于安卓的历史和安卓需要学习哪些东西以及怎么安卓环境,我就不在这里多说了,网上一大推. 我这里主要说的就是代码.一些基础的安卓知识.在接下来的每个月里我都会不定期写一些博客给初学者学习,我会尽量 ...

  10. 用Java开发贪吃蛇游戏

    贪吃蛇游戏的设计步骤: Part 1: 设计游戏图纸 画出900*700的白色窗口 在窗口上添加画布 在画布上添加标题 在画布上添加黑色游戏区 Part 2: 放置静态的蛇:一个头.两个身体 加上开始 ...