从网页头引入两个js文件，注意必须先放jquery的
[javascript] view plaincopy
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
2.之后在网页头自己写一个js脚本
[javascript] view plaincopy
<script>
$(document).ready(function (){
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--本页的导航，意思就是一个可以触发ajax函数的模块
nextSelector: "#navigation a", //下一页的导航
itemSelector: ".scroll " , //此处我用了类选择器，选择的是你要加载的那一个块（每次载入的数据放的地方）
animate: true, //加载时候时候需要动画，默认是false
maxPage: 3,//最大的页数，也就是滚动多少次停。这个页码必须得要你从数据库里面拿
})
})
</script>
3.或许你看到这里还是不太清楚网页怎么定义，这里给出我的demo，希望可以有帮助
[html] view plaincopy
<%@ page language="java" contentType="text/htmlcharset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无限翻页效果</title>
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
<script src="css/infinite-scroll/test/debug.js"></script>
<script>
$(document).ready(function (){ //别忘了加这句，除非你没学Jquery
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--成功后自动隐藏
nextSelector: "#navigation a",
itemSelector: ".scroll " ,
animate: true,
maxPage: 3,
})
})
</script>
</head>
<body>
<div id="container"> <!-- 容器 -->
<div class="scroll"><!-- 每次要加载数据的数据块-->
第一页内容第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容
</div>
</div>
<div id="navigation" align="center"><!-- 页面导航-->
<a href="user/list?page=1"></a> <!-- 此处可以是url，可以是action，要注意不是每种html都可以加，是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数，这个一定要加在这里，它的作用是指出当前页面页码，没加载一次数据，page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。-->
</div>
</body>
</html>
//js获取url上的参数function getParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i")
var r = window.location.search.substr(1).match(reg)
if (r != null)
return unescape(r[2])
return null
}
var page = getParam('page')
这应该是最简单的实现方式了。你看一下吧，不懂的再回复。<style>
*{margin:0px padding:0px}
div {width:150px height:20px overflow:hidden position:relative display:inline-block margin-top:5px}
ul {display:inline-block height:20px position:absolute top:0px left:0px}
li {width:20px height:16px line-height:16px text-align:center border:1px solid #ccc margin-left:3px float:left list-style:none}
.clearfix {both:clear content:'' display:block}
.ciearfix {zoom:1}
</style>
<body>
<input type="button" value="←" id="leftBtn" />
<div>
<ul id="ul" class="clearfix">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
<li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
<li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li>
</ul>
</div>
<input type="button" value="→" id="rightBtn" />
</body>
<script>
var leftBtn = document.getElementById('leftBtn')
var rightBtn = document.getElementById('rightBtn')
var oUl = document.getElementById('ul')
var moveWidth = 150
leftBtn.onclick=function(){
if(oUl.offsetLeft == -300)return
oUl.style.left = oUl.offsetLeft - moveWidth + 'px'
}
rightBtn.onclick=function(){
if(oUl.offsetLeft == 0)return
oUl.style.left = oUl.offsetLeft + moveWidth + 'px'
}
</script>
