高手请指教

Question

谁做过这种效果啊，小弟跪求:
http://www.makewing.com/lanren/jscode/js-0092/希望各位大侠赐教啊，最好是有源码的。如果多的话，可以发到我邮箱啊：[email protected]

Answer 1

<!--这里是显示缩略图的-->
  <table cellspacing="3" width="96%" bgcolor="#f1f1f1" border="0">
                    <tbody>
                        <tr>
                            <td width="4%">
                                <a href="javascript:navrewind();">
                                    <img height="18" src="images/myft_jiao.gif" width="10" border="0"></a>
                            </td>
                            <td align="middle" width="92%">
                                <div id="div1" align="center">
                                </div>
                            </td>
                            <td width="4%">
                                <a href="javascript:navforward();">
                                    <img height="18" src="images/myft_jiao2.gif" width="10" border="0"></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table width="520" border="0">
                    <tbody>
                        <tr>
                            <td class="b" valign="bottom" align="right" width="267" height="40">
                                <div align="left">
                                    <div id="pnumBgDiv">
                                        <div id="pnumDiv">
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <!-- 这里是一张下一张的,不显示这个  <td class="b" valign="bottom" align="right" width="267">
                                <a href="javascript:rewind();">
                                    <img height="19" src="images/photo_pv.gif" width="20" align="absMiddle" border="0">上一张</a>&nbsp;&nbsp;&nbsp;&nbsp;<a
                                        href="javascript:forward();">下一张<img height="19" src="images/photo_nt.gif" width="20"
                                            align="absMiddle" border="0"></a>
                            </td>-->
                        </tr>
                    </tbody>
                </table><!--显示图片的区-->
                <table cellspacing="0" border="0">
                    <tbody>
                        <tr>
                            <td>
                                <div id="imgp" style="width: 100%">
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table height="50" width="100%" border="0">
                    <tbody>
                        <tr>
                            <td class="f14" align="middle" height="46">
                                <div id="pnameDiv">
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>    <script language="JavaScript" type="text/JavaScript">
            initalbum([ {url:"Images/iphone1.jpg",littleUrl:"Images/iphone1.jpg",name:"iphone1"},
                        {url:"Images/iphone2.jpg",littleUrl:"Images/iphone2.jpg",name:"iphone2"},
                        {url:"Images/iphone3.jpg",littleUrl:"Images/iphone3.jpg",name:"iphone3"}]);
   </script>

Answer 2

--调用的JS
var browserCanBlend = (true);
var transitions = "progid:DXImageTransform.Microsoft.Fade(duration=1)";
var arrPreload = new Array();
var imageSrcArray = new Array();
var imageLittleSrcArray = new Array();
var imageNameArray =new Array();
var SHOWINGSTRING='第<FONT color=#5295f2>%slideNum</FONT>/%slideTotal张';
var _PRELOADRANGE = 3; //缩略图数量
var _PREVIEW_WIDTH = 70; //缩略图的宽度
var curImg = 0; //当前图片的index
var numImgs = 0; //总照片数
var begImg  = 0; //初始化的图片的index
var firstframeindex  = -1; //缩略图左边第一张的index
var inittimer  = null; //用于首次打开时显示图片
function scalePhoto(imgId, width, height) {
    var img = document.getElementById(imgId);    if (img != null) {
        var imgWidth = img.width;
        var imgHeight = img.height;
        if (imgWidth == 0)
        {
            img.width = width;
        }
        if (imgHeight == 0) {            img.height = height;
        }
        if (imgWidth > width && imgHeight > height) {
            //both image's width and height are larger than required one
            var widthRate = imgWidth / width;
            var heightRate = imgHeight / height;
            if (widthRate > heightRate) {
                //use width to retrieve the image
                img.width = width;
                img.height = imgHeight * (width / imgWidth);
            } else {
                img.height = height;
                img.width = imgWidth * (height / imgHeight);
            }
        }
        else if (imgWidth > width) {
            //the image width lg than the required width
            img.width = width;
            img.height = imgHeight * (width / imgWidth);
        }
        else if (imgHeight > height) {
            //the image height lg than the required
            img.height = height;
            img.width = imgWidth * (height / imgHeight);
        }
    }
}function replaceNum(myinput, token, newstr)
{
    var input = myinput;
    var output = input;
    var idx = output.indexOf(token);
    if (idx > -1)
{
output = input.substring(0, idx);
output += newstr;
output += input.substr(idx+token.length);
    }
    return output;
}function preloadRange(intPic,intRange) {
var divStr = ""; for (var i=intPic; i<intPic+intRange&&i<numImgs; i++) {
arrPreload[i] = new Image();
arrPreload[i].src = imageSrcArray[i];
} var strIn = "";
var k = 0;
for (i=intPic; i<intPic+intRange; i++) {
j = i;
var strA = "";
var nextImg = curImg;
if(j<numImgs && j>=0){
strA = "<td width=\"80\">asdfasdf<table border=\"0\" cellspacing=\"0\" "+GetBorder(j,curImg)+"><tr><td align=center>"+
"<a href='javascript:changeSlide("+j+")'><img id="+j+" width="+_PREVIEW_WIDTH+" height="+_PREVIEW_WIDTH+" border=0 src='"+
imageLittleSrcArray[j]+"'></a></td></tr></table></td>";
}
  divStr += strA;
}
document.getElementById("div1").innerHTML = "<table><tr>"+divStr+"</tr></table>";
return true;
}function GetBorder(i,j)
{
if(i==j)  return " bgcolor=\"#FFCC00\" ";
return " bgcolor=\"#FFFFFF\" onmouseover=\"this.style.backgroundColor='#ffcc00'\" onmouseout=\"this.style.backgroundColor=''\"";}function changeSlide(n)
{
if(inittimer!=null)  {window.clearInterval(inittimer);inittimer=null;}
    if (document.all)
{
/* transistion effects */
if (browserCanBlend)
{
document.all.imgp.style.filter=transitions;
document.all.imgp.filters[0].Apply();
}else{
     document.all.imgp.style.filter="blendTrans(duration=1)";
     document.all.imgp.filters.blendTrans.Apply();
     }
    }
curImg = n;    //点击查看图片详细信息的地方（需要修改）
    var htmlCont = "" ;
    if (imageSrcArray.length>0) {
htmlCont ="<center><a href='product.htm'>" +
"<img id='js_image' onload='scalePhoto(this.id,800,349);' onerror=\" alert('图片出错');\"  src=\"" + imageSrcArray[curImg] + "\" alt=\"" + imageNameArray[curImg] + "\"";
htmlCont += " border=0 class=uimg ></a></center>";
   }    //pnumLine：显示几多张图片及现在是第几张图片
    var pnumLine = "<span >" + replaceNum(replaceNum(SHOWINGSTRING, "%slideNum", eval(curImg+1)),"%slideTotal", numImgs) + "</span >";
    //document.getElementById("pnumDiv").innerHTML = pnumLine;
    //pnumLine：显示几多张图片及现在是第几张图片
    //document.getElementById("pnameDiv").innerHTML = imageNameArray[curImg];
    //htmlCont: 图片显示内容及点击连接
    document.getElementById("imgp").innerHTML = htmlCont;    if (document.all){
    // 用当前图片filter方式运行
document.all.imgp.filters[0].Play();
    }    //一开始预计图片位置
    if(curImg<=firstframeindex)  firstframeindex--;
    if(curImg<firstframeindex)  firstframeindex=curImg;
    if(curImg>=firstframeindex+_PRELOADRANGE-1)  firstframeindex++;
    if(curImg>firstframeindex+_PRELOADRANGE-1)  firstframeindex=numImgs-_PRELOADRANGE;
    if(firstframeindex>=numImgs-_PRELOADRANGE+1)  firstframeindex = numImgs-_PRELOADRANGE;
    if(firstframeindex<0)  firstframeindex=0;
    preloadRange(firstframeindex,_PRELOADRANGE);
}function forward()
{
var nextFrame = curImg+1;
if (nextFrame >= numImgs){
nextFrame = 0;
}
changeSlide(nextFrame);
}function rewind()
{
var nextFrame = curImg-1;
if (nextFrame < 0){
nextFrame = numImgs-1;
}
changeSlide(nextFrame);
}function navforward()
{
    firstframeindex++;
    if(firstframeindex>numImgs-_PRELOADRANGE)  firstframeindex = numImgs-_PRELOADRANGE;
    if(firstframeindex<0)  firstframeindex=0;
    preloadRange(firstframeindex,_PRELOADRANGE);
}function navrewind()
{
    firstframeindex--;
    if(firstframeindex<0)  firstframeindex=0;
    preloadRange(firstframeindex,_PRELOADRANGE);
}function initalbum(photo)
{
    imageSrcArray = new Array();
    imageLittleSrcArray = new Array();
    imageNameArray =new Array();
//begImg = 0;
    numImgs=0
if(photo==null)  return;
    numImgs = photo.length;
for(i=0;i<photo.length;i++){
        imageSrcArray[i] = photo[i].url
        imageLittleSrcArray[i] = photo[i].littleUrl
        imageNameArray[i] = photo[i].name
} curImg = begImg;
firstframeindex = curImg-Math.floor((_PRELOADRANGE-1)/2);
    if (curImg < 0 || curImg > numImgs - 1)
       curImg = numImgs - 1;
if (imageSrcArray.length>0);{
inittimer=window.setInterval('changeSlide(curImg)',30);
    }
}

Answer 3

--这是CSS
--上午发的时候,CSDN说我发得太多了,死活不让我发
--现在补上
.lanmu_bg01
{
background-image: url(images/lanmu_bg01.gif);
}
.lanmu_bg02
{
background-image: url(images/lanmu_bg02.gif);
}
.lanmu_bg03
{
background-image: url(images/lanmu_bg03.gif);
}
.lanmu_bg00
{
background-position: center 50%;
background-image: url(images/lanmu_bg00.gif);
background-repeat: no-repeat;
}
.lanmu_bgx
{
background-position: center 50%;
background-image: url(images/lanmu_bgx.gif);
vertical-align: 100%;
background-repeat: no-repeat;
}
.main_r_dh11
{
background-position: center 50%;
background-image: url(images/main_r_dh11.gif);
background-repeat: no-repeat;
}
.main_r_dh1
{
background-position: center 50%;
background-image: url(images/main_r_dh1.gif);
background-repeat: no-repeat;
}
.main_r_dh2
{
background-position: center 50%;
background-image: url(images/main_r_dh2.gif);
background-repeat: no-repeat;
}
.main_r_dh1b
{
background-image: url(images/main_r_dh1b.gif);
}
.main_r_01
{
background-image: url(images/main_r_01.gif);
}
.main_r_02
{
background-image: url(images/main_r_02.gif);
}
.main_r_03
{
background-image: url(images/main_r_03.gif);
}
.main_r_04
{
background-image: url(images/main_r_04.gif);
}
.main_r_zi
{
font-weight: bold;
font-size: 14px;
color: #ffffff;
}
.main_r_zi A:link
{
color: #ffffff;
text-decoration: none;
}
.main_r_zi A:visited
{
color: #ffffff;
text-decoration: none;
}
.main_r_zi A:hover
{
color: #ffffff;
text-decoration: none;
}
.nmain_l_01
{
background-image: url(images/nmain_l_01.gif);
}
.nmain_l_02
{
background-image: url(images/nmain_l_02.gif);
}
.main_r_bg
{
background-image: url(images/main_r_bg.gif);
}
.main_r_bt
{
background-image: url(images/main_r_bt.gif);
}
.nmain_r_tp
{
background-image: url(images/nmain_r_tp.gif);
}
.nmain_r_bg
{
background-image: url(images/nmain_r_bg.gif);
}
.nmain_r_bt
{
background-image: url(images/nmain_r_bt.gif);
}
.huise
{
color: #666666;
}