<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片左右箭头</title>
<script src="js/checkExplorer.js" type="text/javascript"></script>
<script>
function preOrNext(event){
var bigimg=document.getElementById("photo");
var event = event || window.event;
var x = event.offsetX || event.layerX;
var temp=bigimg.width/2;
var imgX=bigimg.offsetLeft;
if(Sys.firefox){
if(x<imgX+temp){
bigimg.style.cursor = 'url(images/arr_left.cur),auto';
if(bigimg.title!="已经是第一张"){
bigimg.title="点击跳到上一张";
}
bigimg.onclick=function(){
pre();
};
}else{
bigimg.style.cursor = 'url(images/arr_right.cur),auto';
if(bigimg.title!="已经是最后一张"){
bigimg.title="点击跳到下一张";
}
bigimg.onclick=function(){
next();
};
}
}else{
if(x<temp){
if(bigimg.title!="已经是第一张"){
bigimg.title="点击跳到上一张";
}
bigimg.style.cursor = 'url(images/arr_left.cur),auto';
bigimg.onclick=function(){
pre();
};
}else{
bigimg.style.cursor = 'url(images/arr_right.cur),auto';
if(bigimg.title!="已经是最后一张"){
bigimg.title="点击跳到下一张";
}
bigimg.onclick=function(){
next();
};
}
}
}
</script>
</head>
<body>
<img id="photo" onmousemove="preOrNext(event)" src="images/1.jpg"/>
</body>
</html>
- 1
- 2
前往页