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. 六、阻塞队列LinkedBlockQueue

    一.简介 Java提供了FIFO先进先出的阻塞队列实现,这其实是一种生产者消费者理念,可以通过阻塞队列将生产者和消费者进行解耦合. LinkedBlockQueue是一种无界队列,但事实上它只是队列可 ...

  2. Springboot简介01

    前言: spring是近几年java中最具有代表而且最为流行的框架,spring是基于aop和IOC的思想,在我们的项目中充当了一个粘合剂的作用,既可以成为对象工厂,来管理我们的controller. ...

  3. [LeetCode]Swap Nodes in Pairs题解

    Swap Nodes in Pairs: Given a linked list, swap every two adjacent nodes and return its head. For exa ...

  4. Struts 类型转换之局部和全局配置

    我们碰到过很多情况,就是时间日期常常会出现错误,这是我们最头疼的事,在struts2中有一些内置转换器,也有一些需要我们自己配置. 我们为什么需要类型转换呢? 在基于HTTP协议的Web应用中 客户端 ...

  5. git杂记-打标签

    列出标签 $ git tag v0. v1. 创建标签 --添加附注标签(推荐):加上-a选项(annotated) $ git tag -a v1. -m 'my version 1.4' --添加 ...

  6. POJ P1741 Tree 解题报告

    Description Give a tree with n vertices,each edge has a length(positive integer less than 1001). Def ...

  7. Node.js 的安装

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 的运行环境,简单的说就是运行在服务端的 JavaScript.所以学起来还是比较容易接受的. Node.js 使用事件驱动 ...

  8. 微服务架构之spring cloud zipkin

    Spring Cloud Zipkin是微服务的链路跟踪组件,帮助详细了解一次request&response的总计时,及每个微服务的消耗时间.微服务名称.异常信息等等过程信息. (一) 版本 ...

  9. (WPF) Textbox 每次输入触发事件处理

    1.  Code behind. protected void TextBox1_TextChanged(object sender, EventArgs e) { Label1.Text = Ser ...

  10. MySQL 练习题2

    CREATE TABLE `dept` ( `did` ) NOT NULL AUTO_INCREMENT, `dname` ) DEFAULT NULL, `address` ) DEFAULT N ...