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. 阿里云服务器（Ubuntu16.04 64位）远程连接

    购买阿里云服务器 1.打开阿里云官方网站,账号登录,选择产品中的云服务器 ECS 2.根据自身需求,选择合适的阿里云服务器系统,(1)点击一键购买,(2)选择地域,(3)根据自身需求,选择系统,这里选 ...

  2. 【SSH网上商城项目实战02】基本增删查改、Service和Action的抽取以及使用注解替换xml

    转自:https://blog.csdn.net/eson_15/article/details/51297698 上一节我们搭建好了Struts2.Hibernate和Spring的开发环境,并成功 ...

  3. thinkphp I() 方法

    I() 方法用于获取前台提交的表单的value值. <form id="complai_form" method="post" action=" ...

  4. Mac Iterm 或者自带终端 bogon:~ username$

    mac 在用Iterm2 遇到命令行前缀自带 bogon:~ username$ 太长问题.有代码洁癖的我,终于找到了解决办法. 具体问题见下图: 而我想要的结果是: 解决办法:是安装 Oh My Z ...

  5. Hello,world的几种写法！

    这是我的第一篇文章!开个玩笑~~“你知道回字的四种写法吗”? printf("Hello,world!"); cout<<"Hello,world!" ...

  6. 安装 Zsh 及 Oh-my-zsh

    详细介绍就略过吧,可以参考这篇文章:使用ZSH的九个理由 下面记录一下我在配置ZSH的过程中的要点: 1.基本上你能找到的配置教程都是基于oh-my-zsh的. 因为zsh配置过于复杂,所以有了oh- ...

  7. Windows下本机简易监控系统搭建（Telegraf+Influxdb+Grafana）

    一.文件准备 1.1 文件名称 telegraf-1.2.1_windows_amd64.zip influxdb-1.2.2_windows_amd64.zip grafana-4.2.0.wind ...

  8. 常用cmd命令大全

    最早的电脑系统是从DOS系统开始,DOS时代没有现在Windows这样的视窗操作界面,让你输入命令.随着电脑的发展至今,学习一些常用cmd命令大全是很有必要.大多数的程序员高手们或计算机专家在DOS系 ...

  9. Linux-文件目录命令

    黑色 代表是普通的文件 蓝色 代表是目录(文件夹) 紫色 代表是图片文件 绿色 代表是可以执行的文件(脚本文件)-->存放linux命令的 红色 代表是压缩文件 clear:清屏pwd:显示当前 ...

  10. AdvStringGrid使用小结

    结合最近自己做的一些工作,用到了第三方控件AdvStringGrid,这里就常用的一些技巧做个小小的总结 (1)如何设置表格固定的列数,如下图所示: 这里固定的列数为3列,通过设置下面属性来改变固定的 ...