我利用代码最了下效果，但是很基本的，点击左右可以切换。需要自己修改图片大小，不太方便。
在文章里面添加代码： （调用一个页面）
<iframe height="520" border="0" src="/photo/14/js.htm" frameborder="0" width="640" scrolling="no"></iframe>
然后修改根据自己网站修改 js.htm 和里面的图片链接。
代码如下：
<!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>
<table width="100%" border="0">
<tr>
<th scope="col">点击图片查看上一张和下一张</th>
</tr>
</table>
<p><img id="img1" src="../../images/tjj.jpg" /></p>
<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 = "../../images/arrow001.gif";
var arrowImage2 = new Image();arrowImage2.src = "../../images/arrow002.gif";
var NextPageTips = function(obj){
var str = new String('\
<div style="width:103px;height:27px; text-align:center;"><img id="cursorImg" style="cursor:url([url]transMouse.cur[/url]),auto" src="../../images/arrow001.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('1.jpg','2.jpg','3.jpg');
var img = $$('img1');
img.style.cursor = "url(transMouse.cur),auto";
i = 0;
img.src = imgs[i];
new NextPageTips(img);
</script>
</body>
</html>
