jQuery实现相册浏览

根据我之前的图片预览,改进成相册浏览。下边有一排小的图片,点击下边的小图,上边的大图会显示所点的小图,同时下边被点击的小图会调整到中间,还不会做缓慢移动动画
,功能比较简单。

在写这个的时候,发现img中的alt属性不能实现将鼠标停在图片上显示文字提示,查了才知道要用title,alt是图片加载失败显示提示的,title才能显示图
片时有文字提示。

下面是我的代码

<!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>
    <title>网页相册浏览效果</title>
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        body{font-size:12px; background-color:Black;}
        div{padding-left:12%;padding-top:4.5%;}
        .clsImg{border:1px solid #ccc ;height:11%; width:10%;margin-left:1%;}
        .clsImgShow{ height:50%; width:40%; margin-left:30%; margin-top:7%;}

    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var imgNu = $("div img").length;
            $("img").css({ "cursor": "pointer" });
            $("div img").click(function (e) {
                $("#imgShow").attr({ src: this.src });
                var nu = parseInt(this.id);
                var step = (parseInt(imgNu / 2) + 1 + imgNu - nu) % imgNu;
                var i;
                var arr = new Array();
                var tit = new Array();
                for (i = 1; i <= imgNu; i++) {
                    arr[i] = $("#0" + i).attr("src");
                    tit[i] = $("#0" + i).attr("title");
                }
                for (i = 1; i <= imgNu; i++) {
                    var n = (i + step) % imgNu;
                    if (n == 0)
                        n = 7;
                    $("#0" + n).attr({ src: arr[i], title: tit[i] });
                }
                n =parseInt( imgNu / 2 )+ 1;
                $("#imgShow").attr({ title: $("#0" + n).attr("title") });
            })
        })
    </script>
</head>
<body>
    <img id="imgShow" class="clsImgShow" src="images/img4.jpg" title="" />
    <div>
        <img id="01" class="clsImg" src="images/img1.jpg" title="图片1" />
        <img id="02" class="clsImg" src="images/img2.jpg" title="图片2" />
        <img id="03" class="clsImg" src="images/img3.jpg" title="图片3" />
        <img id="04" class="clsImg" src="images/img4.jpg" title="图片4" />
        <img id="05" class="clsImg" src="images/img5.jpg" title="图片5" />
        <img id="06" class="clsImg" src="images/img6.jpg" title="图片6" />
        <img id="07" class="clsImg" src="images/img7.jpg" title="图片7" />
    </div>
</body>
</html>

效果

初始画面:

点击图片2之后:

您的支持将鼓励我继续创作!