可以通过鼠标滚轮和键盘方向键实现翻页功能，这个翻页特效支持火狐浏览器，实用js特效代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>支持键盘方向键和鼠标滚轮翻页效果_武鸣人</title>
<style type="text/css">
*{margin:0;padding:0;}
img{border:0;}
li{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
body{background:#262626;font-size:9px;font-family:Verdana,Geneva,sans-serif;}
.wuming_ren{position:relative;width:960px;margin:50px 50px 50px 50px;}
.list{width:670px;}
.entry{float:left;width:202px;position:relative;margin:10px;_display:inline;}
.entry a{display:block;text-decoration:none;border:1px #525252 solid;}
.entry a:hover{border:1px #999 solid;}
.entry .url{position:absolute;left:1px;bottom:1px;height:28px;width:200px;background:#000;text-align:center;filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}
.entry .url span{display:block;border:0;color:#fff;margin-top:6px;padding:2px;font-weight:bold;}
._wuming{position:absolute;right:45px;top:10px;width:216px;padding:10px;background:#393939;border:1px #555 solid;color:#fff;}
._wuming li{margin-bottom:4px;}
._wuming li.mt10{margin-bottom:10px;}
#url, #company , #description{color:#999;}
._wuming a{color:#999;}
._wuming a:hover{color:#fff;}
#content h1{color:#ccc;font-size:20px;text-align:center;padding:70px 0;}
#wumingren{clear:both;color:#fff;}
#wumingren a{color:#fff;}
#total{float:left;}
#_wuming_ren{float:right;}
.f90{color:#f90;}
</style>
<script type="text/javascript">
var siteList = {"sites":[
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人一号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人五号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人六号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人七号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人八号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人九号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十一号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十二号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十三号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十四号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十五号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十六号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十七号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十八号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人十九号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十一号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十二号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十三号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十四号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十五号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十六号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十七号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十八号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人二十九号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十一号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十二号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十三号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十四号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十五号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十六号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十七号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十八号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人三十九号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四十号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四十一号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四十二号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四十三号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四十四号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四十五号"},
{"Url":"https://www.wuming.ren","Pic":"/img/20240318_www_wuming_ren_5.jpg","Name":"武鸣人四十六号"}
]
}
</script>
</head>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<body onload="www_wuming_ren();">
<!--把下面代码加到<body>与</body>之间-->
<div class="wuming_ren">
<div class="list">
<div id="content"></div>
<div id="wumingren">
<div id="total"></div>
<div id="_wuming_ren"></div>
</div>
</div>
<div class="_wuming">
<ul>
<li>网址:</li>
<li id="siteurl" class="mt10"><a href="https://www.wuming.ren">https://www.wuming.ren</a></li>
<li>公司:</li>
<li id="sitename" class="mt10">武鸣人</li>
<li>描述:</li>
<li id="description">本站主要记录个人减肥健身及各种日常生活琐事，分享互联网当下流行的励志语录经典短句，收集各种js网页特效代码！</li>
</ul>
</div>
</div>
<script type="text/javascript">
<!--//
function $(id){return document.getElementById(id);}//定义获取ID的方法
function GotoPage(num){//跳转页
Page = num;
www_wuming_ren();
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var PageSize = 9;//每页个数
var Page = 1;//当前页码
function www_wuming_ren(){
var obj = eval(siteList);//获取JSON
var sites = obj.sites;
//获取分页总数
var Pages = Math.floor((sites.length - 1) / PageSize) + 1;
if(Page < 1)Page = 1;//如果当前页码小于1
if(Page > Pages)Page = Pages;//如果当前页码大于总数
var Temp = "";
var BeginNO = (Page - 1) * PageSize + 1;//开始编号
var EndNO = Page * PageSize;//结束编号
if(EndNO > sites.length) EndNO = sites.length;
if(EndNO == 0) BeginNO = 0;
if(!(Page <= Pages)) Page = Pages;
$("total").innerHTML = "Total:<strong class='f90'>" + sites.length + "</strong> Show:<strong class='f90'>" + BeginNO + "-" + EndNO + "</strong>";
//分页
if(Page > 1 && Page !== 1){Temp ="<a href='javascript:void(0)' onclick='GotoPage(1)'><<Index</a> <a href='javascript:void(0)' onclick='GotoPage(" + (Page - 1) + ")'>Previous</a> "}else{Temp = "<<Index Previous "};
//完美的翻页列表
var PageFrontSum = 3;//当页前显示个数
var PageBackSum = 3;//当页后显示个数
var PageFront = PageFrontSum - (Page - 1);
var PageBack = PageBackSum - (Pages - Page);
if(PageFront > 0 && PageBack < 0)PageBackSum += PageFront;//前少后多，前剩余空位给后
if(PageBack > 0 && PageFront < 0)PageFrontSum += PageBack;//后少前多，后剩余空位给前
var PageFrontBegin = Page - PageFrontSum;
if(PageFrontBegin < 1)PageFrontBegin = 1;
var PageFrontEnd = Page + PageBackSum;
if(PageFrontEnd > Pages)PageFrontEnd = Pages;
if(PageFrontBegin != 1) Temp += '<a href="javascript:void(0)" onclick="GotoPage(' + (Page - 10) + ')" title="前10页">..</a>';
for(var i = PageFrontBegin;i < Page;i ++){
Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + i + ")'>" + i + "</a>";
}
Temp += " <strong class='f90'>" + Page + "</strong>";
for(var i = Page + 1;i <= PageFrontEnd;i ++){
Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + i + ")'>" + i + "</a>";
}
if(PageFrontEnd != Pages) Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + (Page + 10) + ")' title='后10页'>..</a>";
if(Page != Pages){Temp += " <a href='javascript:void(0)' onclick='GotoPage(" + (Page + 1) + ");'>Next</a> <a href='javascript:void(0)' onclick='GotoPage(" + Pages + ")'>Last>></a>"}else{Temp += " Next Last>>"}
$("_wuming_ren").innerHTML = Temp;
//输出数据
if(EndNO == 0){//如果为空
$("content").innerHTML += "<h1>No Images</h1>";
return;
}
var html = "";
for(var i = BeginNO - 1;i < EndNO;i ++){
html += "<div class='entry'>";
html += "<a href='" +sites[i].Url+ "' rel='bookmark' title=" +sites[i].Name+ ">";
html += "<img src='" +sites[i].Pic+ "' width='200' height='170' />";
html += "<p class='url'><span>" +sites[i].Name+ "</span></p></a>";
html += "</div>";
}
$("content").innerHTML = html;
clickShow();//调用鼠标点击事件
//键盘左右键翻页
document.onkeydown=function(e){
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which;
if(code==37){
if(Page > 1 && Page !== 1){
GotoPage(Page - 1);
}
}
if(code==39){
if(Page != Pages){
GotoPage(Page + 1);
}
}
}
//鼠标滚轮翻页
function handle(delta){
if (delta > 0){
if(Page > 1 && Page !== 1){
GotoPage(Page - 1);
}
}
else{
if(Page != Pages){
GotoPage(Page + 1);
}
}
}
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE或者Opera. */
delta = event.wheelDelta / 120;
/** 在Opera9中，事件处理不同于IE
*/
if (window.opera)
delta = -delta;
} else if (event._wuming) { /** 兼容Mozilla. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event._wuming / 3;
}
/** 如果 增量不等于0则触发
* 主要功能为测试滚轮向上滚或者是向下
*/
if (delta)
handle(delta);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
/** 初始化 */
if (window.addEventListener)
/** Mozilla的基于DOM的滚轮事件 **/
window.addEventListener("DOMMouseScroll", wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;
}
//获取链接地址和网站名称
function showLink(source){
var siteUrl = $("siteurl");
var siteName = $("sitename");
var description = $("description");
if(source.getAttribute("rel") == "bookmark"){
var url = source.getAttribute("href");
var title = source.getAttribute("title");
siteUrl.innerHTML = "<a href='" + url + "' target='_blank'>"+ url +"</a>";
siteName.innerHTML = title;
}
}
//鼠标点击事件
function clickShow(){
var links = $("content").getElementsByTagName("a");
for(var i=0; i<links.length; i++){
var url = links[i].getAttribute("href");
var title = links[i].getAttribute("title");
links[i].onclick = function(){
showLink(this);
return false;
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//-->
</script>
</body>
</html>