Jquery学习札记三

Jquery学习笔记三
今天做了个例子，是基于事件和动画的。一个网页上有几个版面，每个版面有4张动画图片，当点击下一页的时候，跳到下一个版面，点击上一页的时候跳到上一个版面。如果在第一个版面，点击上一页，直接跳转到最后一个版面，如果是在最后一页，直接跳转到第一个版面。
好了，先做一个初始化页面，页面代码如下

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;    &lt;head&gt;        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;link rel="stylesheet" href="css/animation.css" type="text/css"&gt;&lt;style type="text/css"&gt;&lt;/style&gt;        &lt;script type="text/javascript" src="js/jquery-1.3.1.js"&gt;        &lt;/script&gt;        &lt;script type="text/javascript"&gt;        &lt;/script&gt;        &lt;title&gt;Jquery Animation Test&lt;/title&gt;    &lt;/head&gt;    &lt;body&gt;    &lt;div title="卡通动漫"&gt;卡通动漫&lt;/h2&gt;&lt;div &gt;上一页&lt;/span&gt;&lt;span alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;海贼王&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/01.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;海贼王&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/01.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;海贼王&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/01.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;海贼王&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/02.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;哆啦A梦&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;33,326&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/02.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;哆啦A梦&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;33,326&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/02.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;哆啦A梦&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;33,326&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/02.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;哆啦A梦&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;33,326&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/03.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;火影忍者&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/03.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;火影忍者&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/03.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;火影忍者&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/03.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;火影忍者&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/04.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;龙珠&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放 &lt;em&gt;57,865&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/04.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;龙珠&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放 &lt;em&gt;57,865&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/04.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;龙珠&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放 &lt;em&gt;57,865&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/04.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;龙珠&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放 &lt;em&gt;57,865&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;     &lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;    &lt;/body&gt;&lt;/html&gt;

这是初始化的页面，然后我加入css和图片，效果如下

现在我知道了每个版面是4个图片，那么我要计算它的版面共有多少个了，设定初始化版面1，除以4就是它的版面数，如果是基数，则版面数要加1。同样，还要得到区域内容，就是版面内容的宽度。现在先做下一页的例子，一页一页向下翻。加上Jquery后的代码如下，有注释

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;    &lt;head&gt;        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;link rel="stylesheet" href="css/animation.css" type="text/css"&gt;&lt;style type="text/css"&gt;&lt;/style&gt;        &lt;script type="text/javascript" src="js/jquery-1.3.1.js"&gt;        &lt;/script&gt;        &lt;script type="text/javascript"&gt;         $(function() {var page = 1;var i = 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"); //找到"视频内容展示区域"外围的divvar 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");});})        &lt;/script&gt;        &lt;title&gt;Jquery Animation Test&lt;/title&gt;    &lt;/head&gt;    &lt;body&gt;    &lt;div title="卡通动漫"&gt;卡通动漫&lt;/h2&gt;&lt;div &gt;上一页&lt;/span&gt;&lt;span alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;海贼王&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/01.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;海贼王&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/01.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;海贼王&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/01.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;海贼王&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/02.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;哆啦A梦&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;33,326&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/02.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;哆啦A梦&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;33,326&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/02.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;哆啦A梦&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;33,326&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/02.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;哆啦A梦&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;33,326&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/03.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;火影忍者&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/03.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;火影忍者&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/03.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;火影忍者&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/03.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;火影忍者&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放:&lt;em&gt;28,276&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/04.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;龙珠&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放 &lt;em&gt;57,865&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/04.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;龙珠&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放 &lt;em&gt;57,865&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/04.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;龙珠&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放 &lt;em&gt;57,865&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img/04.jpg" alt="Jquery学习札记三" /&gt;&lt;/a&gt;&lt;h4&gt;&lt;a href="#"&gt;龙珠&lt;/a&gt;&lt;/h4&gt;&lt;span&gt;播放 &lt;em&gt;57,865&lt;/em&gt;&lt;/span&gt;&lt;/li&gt;     &lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;    &lt;/body&gt;&lt;/html&gt;

同理，如果是上一页的话，那么只需要加上这段代码就ok了

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 --;}

好了，下面是做好后的效果，当我点击下一页时，图片如下

当到最后一页，如下

再点击下一页时候，就回到了第一个页面，如下

好了，全部搞定。

Jquery学习札记三

热点推荐