效果见:http://www.xsborts.com/article/9e/2080.html
大家看看有什么问题?
我目前发现两个问题:
1.在IE下当鼠标在大图上时,左右箭头显示缓慢,如果快速移动鼠标到另一侧,箭头有时也不会快速变换,会有1-2秒的延时。我注意到IE下边有:正在下载xxxx鼠标文件的提示.FireFox下没有这个问题。
2.加载页面完成后,点第一张图片,有时会打开新窗口(这是不希望的),并单独显示这张图片。
这两个问题,还没找到解决办法,后来发现ifeng.com的图片浏览也有第一个问题的现象。你们有办法吗?
该javascript脚本在http://www.xsborts.com/hbcms/script/xsbortsImageBrowser.js
请大家分析下,也欢迎大家改动原脚本以优化之!

解决方案 »

  1.   

    <table width="600" border="0" align="center" bgcolor="#999999">
      
      <tr>
        <th height="110" width="600"   bgcolor="#777777" 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:#999999" ><div id="imgSmallDivInner" style="position:relative;overflow:visible;white-space:nowrap;font-size:0px;background:#999999"></div>
        </div></th>
      </tr>
      <tr >
        <td align="center" id="imgBigTdDesc" ></td>
      </tr>
      <tr > <td align="center" id="imgBigTdX" height=300></td>
      </tr>
    </table><script language="javascript">
     var imgBigDesc=new Array(
        ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/90/9059_100815202827.jpg" ],
        ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/48/4849_100815202827.jpg" ],
        ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/46/4621_100815202827.jpg" ],
        ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/06/0608_100815202827.jpg" ],
        ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/84/8467_100815202827.jpg" ],
        ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/70/7082_100815202920.jpg" ],
        ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/07/0700_100815202923.jpg" ],
        ["青奥会女足小组赛 伊朗队“全副武装”进球也疯狂" ,"http://www.xsborts.com/hbcms/upload/image/201008/big/12/1207_100815202923.jpg" ]
      );
     var urlLoading="http://www.xsborts.com/hbcms/image/loading.gif";
     var urlLeftArrow="url(http://www.xsborts.com/hbcms/image/left.cur),auto";
     var urlRightArrow="url(http://www.xsborts.com/hbcms/image/right.cur),auto";
     var myImageBrowser=new xsbortsImageBrowser(imgBigDesc,"imgBigTdX","imgBigTdDesc","imgSmallDiv","imgSmallDivInner",urlLoading,urlLeftArrow,urlRightArrow);
     myImageBrowser.insertSmallImg("myImageBrowser");
     myImageBrowser.imgChangeToBig(imgBigDesc[0][1],imgBigDesc[0][0],0,"myImageBrowser");
     var myScript=myImageBrowser.createScriptHead(); 
     myScript+=myImageBrowser.createBigImgClick("myImageBrowser");
     myScript+=myImageBrowser.createBigImgMouseMove("myImageBrowser");
     myScript+=myImageBrowser.createBigImgMouseDown("myImageBrowser");
     myScript+=myImageBrowser.createBigImgMouseUp("myImageBrowser");
     myScript+=myImageBrowser.createAllSmallImgHover("myImageBrowser");
     myScript+=myImageBrowser.createScriptTail();
     $(myImageBrowser.jqBigImg).html(myScript); 
     </script>
      

  2.   

    2楼的是布局HTML的代码,以及调用该脚本的方法。
    其中有几个函数的参数是字符串myImageBrowser,这代表你创建的xsbortsImageBrowser的名字,xsbortsImageBrowser对象的参数含义请见脚本