国庆大散分，另外问个小问题。

Question

大家国庆节好啊，嫦娥2马上就要发射了，预祝成功顺利。另外问个小问题，我想实现一种JS的图片特效，具体是：类似于图片轮播，只是中间的图片要放大显示。
例如，我有十张图片要显示，其中页面上正在显示的有五张，多于五张的通过两边的向左向右按钮滚动查看。其中，当前正在显示的最左边和最右边的图片尺寸要一样，然后第二张和倒数第二张的尺寸要一样，中间一张的尺寸为最大。当单击右边的按钮时，最右边的图片要身左边移动，并且尺寸要自动缩放。
示例：[向左滚动按钮]  图片A(小图)   图片B(中图)   图片C(大图)  图片D(中图)   图片E(小图)  [向右滚动按钮]当点击向右滚动按钮后
[向左滚动按钮]  图片B(小图)   图片C(中图)   图片D(大图)  图片E(中图)   图片F(小图)  [向右滚动按钮]
....也就是说图片向左或向右移动后会自动变成大图或小图。我自己做了这个效果，只是实现方法比较笨拙，我是写了个jquery的插件，然后把每个显示的图片位置显示预先求出来，然后通过自定义动画来完成的。只是感觉这个方法不太好，大家有没有好的方法？ 或者有没有哪个网站有类似的特效，把网址贴上来，多谢。

Answer 1

我发现17173上有类似 可惜人家用FLASH做的 =. = 来接分

Answer 2

很多网站用flash
JS参考
/*
=========================================================
生成等比例缩略图，图片不失真
==========================================================
*/
function DrawImage(ImgD, FitWidth, FitHeight) {
    var image = new Image();
    image.src = ImgD.src;
    if (image.width > 0 && image.height > 0) {
        if (image.width / image.height >= FitWidth / FitHeight) {
            if (image.width > FitWidth) {
                ImgD.width = FitWidth;
                ImgD.height = (image.height * FitWidth) / image.width;
            } else {
                ImgD.width = image.width;
                ImgD.height = image.height;
            }
        } else {
            if (image.height > FitHeight) {
                ImgD.height = FitHeight;
                ImgD.width = (image.width * FitHeight) / image.height;
            } else {
                ImgD.width = image.width;
                ImgD.height = image.height;
            }
        }
    }
}
/*
=========================================================
动态切换图片,鼠标划过时暂停在某图片上面
图片样式
<style type="text/css">
    .imgSelect img
    {
        filter: alpha(opacity=100);
        opacity: 0.4;
        -moz-opacity: 0.4;
    }
    .imgUnSelect img
    {
        filter: alpha(opacity=40);
        opacity: 0.4;
        -moz-opacity: 0.4;
    }
</style>调用方法
后台动态的给imageurl，imageid，imageName赋值前台脚本：
<div style="width:340px;">
    <div id="divBigImg" style="width:100%; height:250px; overflow:hidden;">
    </div>
    <div id="divImgName" style="text-align: center; line-height:25px; width: 100%; background-color:Gray; color: White; font-weight:bold;">
    </div>
    <div style="background-color:Black;">
        <%=imgHtml %></div>
</div>示例：
PS/SlideChange.aspx
==========================================================
*/
var i_strngth = 1;
var i_image = 0;
var imgWidth = 330;
var timer;
var imageurl = new Array();//图片URL
//imageurl[0] = "201001012223460.jpg";
//imageurl[1] = "201001012227010.jpg";
//imageurl[2] = "201001012228301.jpg";
var imageid = new Array();//图片ID
var imageName = new Array();//图片名称
var goonflag = true;
//<%=js %>//绑定图片信息
function showimage() {//debugger;
    if(imageid.length>0){
        if(goonflag){//debugger;
            if (document.all) {
                if (i_strngth <= 110) {
                    document.getElementById("divBigImg").innerHTML = "<img style='filter:alpha(opacity=" + i_strngth + "); cursor:pointer;' onload='DrawImage(this,"+imgWidth+","+imgWidth+");' " +
                        "src='../Adjunct/ImagesNews/" + imageurl[i_image] + "' onclick='window.open(\"viewimage.aspx?id=" + imageid[i_image] + "&c=\")' border=0>";
                    i_strngth = i_strngth + 10;
                    timer = setTimeout("showimage()", 200);
                    document.getElementById("divImgName").innerHTML = imageName[i_image];
                    showLayer();
                    document.getElementById("divimg_" + i_image).className = "imgSelect";
                }
                else {
                    clearTimeout(timer);
                    timer = setTimeout("hideimage()", 2000);
                }
            }
            if (document.layers) {
                clearTimeout(timer);
                document.getElementById("divBigImg").document.write("<img src='../Adjunct/ImagesNews/" + imageurl[i_image] + "' " +
                    "onload='DrawImage(this,310,310);' onclick='window.open(\"viewimage.aspx?id=" + imageid[i_image] + "&c=\")' style='cursor:pointer;' border=0>");
                document.close();
                document.getElementById("divImgName").innerHTML = imageName[i_image];
                showLayer();
                document.getElementById("divimg_" + i_image).className = "imgSelect";
                i_image++;
                if (i_image >= imageurl.length) { i_image = 0; }
                var timer = setTimeout("showimage()", 2000);
            }
        }
    }
}
function hideimage() {
    if (i_strngth >= -10) {
        document.getElementById("divBigImg").innerHTML = "<img style='filter:alpha(opacity=" + i_strngth + "); cursor:pointer;' onload='DrawImage(this,"+imgWidth+","+imgWidth+");' " +
            "src='../Adjunct/ImagesNews/" + imageurl[i_image] + "' onclick='window.open(\"viewimage.aspx?id=" + imageid[i_image] + "&c=\")' border=0>";
        i_strngth = i_strngth - 10;
        timer = setTimeout("hideimage()", 200);
    }
    else {
        clearTimeout(timer);
        i_image++;
        if (i_image >= imageurl.length) { i_image = 0; }
        i_strngth = 1;
        timer = setTimeout("showimage()", 750);
    }
}showimage();
function goFocus(id) {//debugger;
    //暂停定时器
    i_image = id;
    clearTimeout(timer);
    goonflag = false;
    if (document.all) {
        if (i_strngth <= 110) {
            document.getElementById("divBigImg").innerHTML = "<img style='cursor:pointer;' onload='DrawImage(this," + imgWidth + "," + imgWidth + ");' " +
                "src='../Adjunct/ImagesNews/" + imageurl[i_image] + "' onclick='window.open(\"viewimage.aspx?id=" + imageid[i_image] + "&c=\")' border=0>";
            document.getElementById("divImgName").innerHTML = imageName[i_image];
            showLayer();
            document.getElementById("divimg_" + i_image).className = "imgSelect";
        }
        else {
            clearTimeout(timer);
            timer = setTimeout("hideimage()", 2000);
        }
    }
    if (document.layers) {
        clearTimeout(timer);
        document.getElementById("divBigImg").document.write("<img src='../Adjunct/ImagesNews/" + imageurl[i_image] + "' " +
            "onload='DrawImage(this," + imgWidth + "," + imgWidth + ");' onclick='window.open(\"viewimage.aspx?id=" + imageid[i_image] + "&c=\")' style='cursor:pointer;' border=0>");
        document.close();
        document.getElementById("divImgName").innerHTML = imageName[i_image];
        showLayer();
        document.getElementById("divimg_" + i_image).className = "imgSelect";
    }
}
function goOn() {
//    i_image++;
//    if (i_image >= imageurl.length) { i_image = 0; }
    goonflag = true;
    showimage();
}