JS实现的图片上左右箭头翻页

分类: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" />
<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" />




<div style="width:550px;margin:20px auto;">
<p><strong><a href="http://www.endbus.cn">布士收藏夹整理</a></strong> <a href="http://www.endbus.cn/" target="_blank">js小程序</a></p>

<p>JS实现的图片上左右箭头翻页,代码精简易用,推荐下载!!</p>
</div>

</body>
</html>
小程序演示:endbus.net/demo/js/jstonextup/

本文链接: JS实现的图片上左右箭头翻页
版权所有:布士收藏夹在网络收集,如有侵犯你的权利, 请联系QQ:641868752。

评论

发表评论

*

* (显示gravatar头像)

Ctrl+Enter快捷回复

© 2014 布士收藏夹 all rights reserved.