今天做了个例子，是基于事件和动画的。一个网页上有几个版面，每个版面有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学习笔记
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
锋利的JQuery学习笔记
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
javascript jquery 学习笔记 资料
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
JQUERY学习笔记.doc JQUERY学习笔记.doc JQUERY学习笔记.doc
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
NULL 博文链接：https://goyourauntie.iteye.com/blog/745626
JQuery学习笔记，docx格式，记录了JQuery的一些知识要点，供大家参考。
JQuery学习笔记.txtJQuery学习笔记.txtJQuery学习笔记.txt
这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配，是学习熟悉jQuery的好资料！
JQuery学习笔记 详 个人学习Jquery时记下的心得笔记 详细
jquery 学习笔记源码 3jquery常规选择器
]_封捷_jQuery学习笔记
锋利的JQuery学习笔记，总结超经典！
这是关于JQuery的学习过程中的一个笔记，当中记载了很多注意事项以及技巧，值得一看
jquery学习笔记附带例子，希望对新手有帮助