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. C++/CLI 本地字符串和托管字符串之间的转换

    参考: https://docs.microsoft.com/zh-cn/cpp/dotnet/overview-of-marshaling-in-cpp #include "msclr/m ...

  2. mybatis必知必会二

    关联: 嵌套查询:通过执行另外一个 SQL 映射语句来返回预期的复杂类型. 嵌套结果:使用嵌套结果映射来处理重复的联合结果的子集.首先,然让我们来查看这个元素的属性.所有的你都会看到,它和普通的只由 ...

  3. 【SSH网上商城项目实战24】Struts2中如何处理多个Model请求

       转自: https://blog.csdn.net/eson_15/article/details/51465067 1. 问题的提出 Struts2中如果实现了ModelDriven<m ...

  4. Excel2010条件格式的位置

    以下是excel2010的条件格式设置方法(英文版) 具体使用方法可以参考 http://office.microsoft.com/zh-cn/excel-help/HA102809768.aspx

  5. Redis实现分布式锁2

    redisTemplate实现分布式锁 /** * 分布式锁-加锁 * @param key * @param value 当前时间+超时时间 System.currentTimeMillis()+t ...

  6. Java中返回值的详解

    package com.company; //java中main()函数中调用其他方法的两种方式//1.实例化对象 public class returnDemo { public static vo ...

  7. 颤振错误：当前Flutter SDK版本为2.1.0-dev.0.0.flutter-be6309690f？

    我刚刚升级了我的扑动,升级后我无法在Android Studio上运行任何扑动项目.我收到此错误消息. The current Dart SDK version -dev.0.0.flutter-be ...

  8. Eclipse调试不能进入断点

    Eclipse下在给行设置断点或者在调试时弹出错误“Unable to install breakpoint due to missing line number attributes,Modify ...

  9. Springmvc和Mybatis中常用的注解

    使用注解来构造IoC容器 用注解来向Spring容器注册Bean.需要在applicationContext.xml中注册<context:component-scan base-package ...

  10. PHP中die()、exit()、return的区别

    1.die()是exit()的别名函数,用法与exit()完全相同,php手册上的说法是,“使用这种别名通常不是个好主意,因为这种别名可能会被完全废弃或更名,导致脚本难以移植到新版本的 PHP 上.” ...