求教这种鼠标放上就换图的效果如何实现。

Question

如淘宝这个网页http://fashion.taobao.com/
左侧有5个图顺序变换，当鼠标放到1上就是1的图。放到2上就是2的图
各图还有各自的链接。
谢谢各位了。 
 

Answer 1

这个比适合你http://www.17css.com/auto-play-jquery-slide/

Answer 2

一般用flash做，
也可以用JS实现
给个以前写的做参考
<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>    <script type="text/javascript">
        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);
            }
        }        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;
                    }
                }
            }
        }        
        function showLayer(){
            for (var i = 0; i < imageid.length; i++) {
                document.getElementById("divimg_" + i).className = "imgUnSelect";
            }
        }
    </script></head>
<body class="SBodyM0px">
    <form id="form1" runat="server">
    <div>
        <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>
    </div>
    </form>    <script type="text/javascript">
        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();
        }
    </script></body>
</html>