图片上左右箭头翻页代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是图片上左右箭头翻页代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为图片上左右箭头翻页代码，属于站长常用代码" />
<title>图片上左右箭头翻页代码</title>
</head>

<body style="text-align:center">

<script>
function upNext(bigimg){
	var lefturl		= '01.html';
	var righturl	= '03.html';
	var imgurl		= righturl;
	var width	= bigimg.width;
	var height	= bigimg.height;
	bigimg.onmousemove=function(){
		if(event.offsetX<width/2){
			bigimg.style.cursor	= 'url(images/arr_left.cur),auto';
			imgurl				= lefturl;
		}else{
			bigimg.style.cursor	= 'url(images/arr_right.cur),auto';
			imgurl				= righturl;
		}
	}
	bigimg.onmouseup=function(){
		top.location=imgurl;
	}
}
</script>
<img onmouseover="upNext(this)" src="images/02.jpg" />
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)