<!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=utf-8" /> <title>图片上的左右箭头切换上一张下一张图片的js代码</title> </head> <body> <img id="img1" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081122582652.jpg" /> <script type="text/javascript"> var Util = {}; Util.Event = { stop: function(ent){ var e = ent||window.event; if (e.preventDefault){ e.preventDefault(); e.stopPropagation(); } else{ e.returnValue = false; e.cancelBubble = true; } }, add:function(elem,name,fn,useCapture){ if (name == 'keypress' && (navigator.appVersion.match(/Konqueror|Safari|KHTML/) || elem.attachEvent)) name = 'keydown'; if(elem.addEventListener){ elem.addEventListener(name,fn,useCapture); } if(elem.attachEvent){ elem.attachEvent("on"+name,fn); } }, getEvent:function() { if (window.event) { return this.formatEvent(window.event); } else { return this.getEvent.caller.arguments[0]; } }, formatEvent:function (oEvent) { if (document.all) { oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0; oEvent.eventPhase = 2; oEvent.isChar = (oEvent.charCode > 0); oEvent.pageX = oEvent.clientX + document.body.scrollLeft; oEvent.pageY = oEvent.clientY + document.body.scrollTop; oEvent.layerX = oEvent.offsetX; oEvent.layerY = oEvent.offsetY; oEvent.preventDefault = function () { this.returnValue = false; } if (oEvent.type == "mouseout") { oEvent.relatedTarget = oEvent.toElement; } else if (oEvent.type == "mouseover") { oEvent.relatedTarget = oEvent.fromElement; } oEvent.stopPropagation = function () { this.cancelBubble = true; }; oEvent.target = oEvent.srcElement; oEvent.time = (new Date).getTime(); } return oEvent; } } function $$(element) { return document.getElementById(element); }
var arrowImage1 = new Image();arrowImage1.src = "http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081320350774.gif"; var arrowImage2 = new Image();arrowImage2.src = "http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081320350766.gif"; var NextPageTips = function(obj){ var str = new String('\ <div style="width:103px;height:27px; text-align:center;"><img id="cursorImg" style="cursor:url(transMouse.cur),auto" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081320350774.gif" /></div>\ <div style="width:103px;height:20px; border:1px solid #ffffff;filter:Alpha(Opacity=70);-moz-opacity: 0.8">\ <div style="width:101px;height:18px;border:1px solid #000000;filter:Alpha(Opacity=60);-moz-opacity: 0.8">\ <div style="width:100%;height:100%; background:#000000; filter:Alpha(Opacity=60);-moz-opacity: 0.6">\ </div>\ </div>\ </div>\ <span id="NextPageTipsSpan" style="font-size:13px; position:relative; top:-20px;left:8px;color:#ffffff;" ></span>\ '); Util.Event.add(obj,"mousemove",function(){ var ObjectX = 0; ObjectX = Util.Event.getEvent().layerX; if($$('NextPageTips')==null) { var oDiv = document.createElement("div"); oDiv.style.position = "absolute"; oDiv.style.left = Util.Event.getEvent().pageX + "px"; oDiv.style.top = Util.Event.getEvent().pageY + "px"; oDiv.id = "NextPageTips"; oDiv.style.height="20px"; oDiv.style.width="103px"; document.body.appendChild(oDiv); $$('NextPageTips').innerHTML = str; } $$('NextPageTips').style.left = Util.Event.getEvent().pageX - 45 + "px"; $$('NextPageTips').style.top = Util.Event.getEvent().pageY + 10 + "px"; if(document.all) { Util.Event.stop(); } var image = new Image(); image.src = Util.Event.getEvent().target.src; width = image.width; if(ObjectX<Math.floor(width/2)) { $$('cursorImg').src = arrowImage1.src; $$('NextPageTipsSpan').innerHTML = "点击查看上一张"; Util.Event.getEvent().target.onclick = function(){ prePic(); } } else { $$('cursorImg').src = arrowImage2.src; $$('NextPageTipsSpan').innerHTML = "点击查看下一张"; Util.Event.getEvent().target.onclick = function(){ nextPic(); } } },false); Util.Event.add(obj,"mouseout",function(){ if($$('NextPageTips')!=null) document.body.removeChild($$('NextPageTips')); },false); }; function prePic() { if (i==0) alert('已经是第一张了'); else img.src = imgs[--i]; } function nextPic() { if (i==imgs.length-1) alert('已经是最后一张了'); else img.src = imgs[++i]; } imgs = new Array('http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081122582652.jpg','http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081122582644.jpg','http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081122582622.jpg'); var img = $$('img1'); img.style.cursor = "url(transMouse.cur),auto"; i = 0; img.src = imgs[i]; new NextPageTips(img); </script> </body> </html> |