用JQUERY做了个大量图片浏览器，有点问题

发布于 2022-09-08 07:38:53 字数 7788 浏览 12 评论 2

本帖最后由 pen10 于 2010-08-12 08:42 编辑

代码如下：

<!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>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
}
a {
}
-->
</style>
</head>
<script src="http://www.xsborts.com/hbcms/script/jquery/jquery_1.3.1.js" type="text/javascript"></script>
<body>
<table width="600" border="0" align="center" bgcolor="#FFFFFF">
<tr>
<th height="100" bgcolor="#000000" scope="row" align="center"><div id="imgSmallDiv" STYLE="position:relative; width:600px;overflow-x:auto; overflow-y:hidden;white-space:nowrap; font-size:0px; background:#000000" ><div id="imgSmallDivInner" style="position:relative;overflow:visible;white-space:nowrap;font-size:0px;background:#FFFFFF"></div>
</div></th>
</tr>
<tr >
<td align="center" id="imgBigTdDesc"></td>
</tr>
<tr > <td align="center" id="imgBigTdX"></td>
</tr>
</table>
<script language="javascript">
//图片数组
var imgBigDesc=new Array(
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","https://www.wenjiangs.com/wp-content/uploads/chinaunix/202206/4977_100811172530.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","https://www.wenjiangs.com/wp-content/uploads/chinaunix/202206/0539_100811172530.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","https://www.wenjiangs.com/wp-content/uploads/chinaunix/202206/5895_100811172530.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","https://www.wenjiangs.com/wp-content/uploads/chinaunix/202206/5723_100811172530.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","https://www.wenjiangs.com/wp-content/uploads/chinaunix/202206/8270_100811172531.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","https://www.wenjiangs.com/wp-content/uploads/chinaunix/202206/6334_100811172709.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","https://www.wenjiangs.com/wp-content/uploads/chinaunix/202206/0168_100811172709.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","https://www.wenjiangs.com/wp-content/uploads/chinaunix/202206/8887_100811172709.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","https://www.wenjiangs.com/wp-content/uploads/chinaunix/202206/6096_100811172709.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","https://www.wenjiangs.com/wp-content/uploads/chinaunix/202206/1961_100811172709.jpg"]
);
var imgSmallDesc=[];
var currentImgX=0;
var innerDivWidth=0;
//插入小图
function insertTdSmall(){
for(imgNumX=0;imgNumX<imgBigDesc.length;imgNumX++){
imgBigStr=imgBigDesc[imgNumX][1];
imgSmallStr=imgBigStr.replace(/big/,"small");
imgSmallDesc.push([imgBigDesc[imgNumX][0],imgSmallStr]);
imgHrefChangeToBig="javascript:imgChangeToBig("+String.fromCharCode(34)+imgBigDesc[imgNumX][1]+String.fromCharCode(34)+","+String.fromCharCode(34)+imgBigDesc[imgNumX][0]+String.fromCharCode(34)+","+imgNumX+");";
$("#imgSmallDivInner").append("<a href='"+imgHrefChangeToBig+"' class='mylink'><img boder=0 id='"+ imgNumX+"imgSmallX' src='"+imgSmallDesc[imgNumX][1]+"' align='middle' alt='"+imgSmallDesc[imgNumX][0]+"' title='"+ imgSmallDesc[imgNumX][0]+"'></a>");
strImgSmallID="#"+imgNumX+"imgSmallX";
if (imgNumX==0) $(strImgSmallID).css('opacity', '0.4');
else $(strImgSmallID).css('opacity', '1');
innerDivWidth+=$(strImgSmallID).width()+4;
}
}
//切换图片函数
function imgChangeToBig(imgUrlX,imgDescX,imgNumDisplay){
document.getElementById('imgBigTdX').innerHTML="<img id='imgBigX' src='"+imgUrlX+"' alt='"+imgDescX+"'"+"title='"+ imgDescX+"' >";
if($("#imgBigX").width()>600) {
$("#imgBigX").height(600*$("#imgBigX").height()/$("#imgBigX").width());
$("#imgBigX").width(600);
}
$("#imgBigTdDesc").html("<span style='font-size: medium'>"+imgDescX+String.fromCharCode(40)+(imgNumDisplay+1)+"/"+imgSmallDesc.length+String.fromCharCode(41)+"</span>");
strImgSmallID="#"+imgNumDisplay+"imgSmallX";
strCurrentImgSmallID="#"+currentImgX+"imgSmallX";
$(strCurrentImgSmallID).css('opacity', '1');
$(strImgSmallID).animate({opacity:0.4});
currentImgX=imgNumDisplay;
}
//初始化
$("#imgSmallDivInner").append("<style type='text/css'>a.mylink:link {color:#000000;} a.mylink:visited {color:#000000;} a.mylink:hover {color:#0000FF;} a.mylink:active {color:#0000FF;} </style>");
insertTdSmall();
imgChangeToBig(imgBigDesc[0][1],imgBigDesc[0][0],0);
$("#imgBigTdDesc").html("<span style='font-size: medium'>"+imgBigDesc[0][0]+String.fromCharCode(40)+"1/"+imgSmallDesc.length+String.fromCharCode(41)+"</span>");
</script>
</body>
</html>

复制代码　

直接复制到记事本，改成HTML即可用了。
单独这样是没有问题的，但是把这段代码body之内的复制到我的站点的文章系统后生成文章就有问题了
效果见http://www.xsborts.com/article/7f/2064.html
Firefox3.6我试过是没有问题的，但是在IE里总是有那讨厌的蓝框，我想肯定是a标记的CSS问题。
但不知道是怎么回事，为什么FF可以，IE就不行，真是怪异。
最初是把那段CSS写到一个文件叫main_css.js里，用document.write写的。
看看有什么解决办法？
对代码有问题的请直接说

分享到QQ

分享到微博