今天做了个例子，是基于事件和动画的。一个网页上有几个版面，每个版面有4张动画图片，当点击下一页的时候，跳到下一个版面，点击上一页的时候跳到上一个版面。如果在第一个版面，点击上一页，直接跳转到最后一个版面，如果是在最后一页，直接跳转到第一个版面。
好了，先做一个初始化页面，页面代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/animation.css" type="text/css">
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.3.1.js">
</script>
<script type="text/javascript">
</script>
<title>Jquery Animation Test</title>
</head>
<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>
</html>
这是初始化的页面，然后我加入css和图片，效果如下
现在我知道了每个版面是4个图片，那么我要计算它的版面共有多少个了，设定初始化版面1，除以4就是它的版面数，如果是基数，则版面数要加1。同样，还要得到区域内容，就是版面内容的宽度。现在先做下一页的例子，一页一页向下翻。加上Jquery后的代码如下，有注释
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/animation.css" type="text/css">
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.3.1.js">
</script>
<script type="text/javascript">
$(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"); //找到"视频内容展示区域"外围的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");
});
})
</script>
<title>Jquery Animation Test</title>
</head>
<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>
</html>
同理，如果是上一页的话，那么只需要加上这段代码就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 --;
}
好了，下面是做好后的效果，当我点击下一页时，图片如下
当到最后一页，如下
再点击下一页时候，就回到了第一个页面，如下
好了，全部搞定。
- 大小: 31.7 KB
- 大小: 31 KB
- 大小: 34.5 KB
- 大小: 31.2 KB
分享到：
相关推荐
Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录，本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
锋利的JQuery学习笔记
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库，它简化了网页文档对象模型（DOM）操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念，包括选择器、常用方法以及在...
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
**jQuery学习笔记** jQuery，作为一个轻量级的JavaScript库，极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧，帮助初学者快速上手。 ## 一...
《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源，由知名讲师韩顺平的课程实录整理而成，旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...
以下是对JQuery学习笔记的详细解析： 首先，JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异，导致开发跨浏览器的网页应用变得复杂。为了统一这些...
《jQuery学习笔记详解》 jQuery，作为一款广泛应用于前端开发的JavaScript库，因其简洁的语法和强大的功能，深受开发者喜爱。这份"jQuery学习笔记.rar"包含的资源旨在帮助你全面掌握jQuery，无论你是初学者还是有...
这里，我们有针对这两个主题的学习笔记和参考资料，包括JavaScript培训、jQuery API、JavaScript基础、函数详解以及jQuery使用手册等内容。让我们逐一探讨这些知识点。 首先，`JavaScript培训.zip`可能包含的是对...
这个"JQuery学习笔记合集"包含了三个部分，旨在帮助开发者从初级到高级逐步掌握jQuery的核心技术和实践应用。 **第一季：jQuery基础篇** 在"jQ学习第一季.rar"中，你将学习到jQuery的基础知识，包括如何引入jQuery...
### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax？** Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用来创建快速动态网页的技术，通过在后台与服务器进行少量数据...
3. **获取jQuery集合中的某一项**： 使用`eq(index)`或`get(index)`方法可以从jQuery集合中获取指定索引的元素。`eq()`返回一个新的jQuery对象，而`get()`返回DOM元素。索引号也可以直接用于访问DOM元素，如`$("#...
**jQuery学习笔记 jQuery API** jQuery，作为一款广泛使用的JavaScript库，极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本笔记旨在帮助开发者快速上手并深入理解jQuery的核心概念和API。 ### 1. jQuery...
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
### JQuery学习笔记（技术文档） #### 一、JQuery能做什么？ JQuery 是一款轻量级的 JavaScript 库，它的设计宗旨是“write less, do more”，即“写得更少，做得更多”。通过JQuery，可以实现以下功能： 1. **...
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记，以HTML页面的形式呈现，方便阅读和...
《圣思源jQuery学习笔记详解》 jQuery，作为一款强大的JavaScript库，自2006年发布以来，因其简洁易用的API和丰富的插件生态，迅速成为了前端开发者的重要工具。圣思源张龙老师的jQuery学习笔记，深入浅出地剖析了...
《锋利的jQuery学习笔记》是一份深入探讨jQuery框架的学习资料，主要针对想要掌握JavaScript库jQuery的开发者。jQuery是一款高效、简洁的JavaScript库，它极大地简化了JavaScript代码的编写，使得DOM操作、事件处理...