Jquery导航条淡进淡出相册（动态无刷新加载数据库数据）-优快云博客

本文详细阐述了如何使用AJAX动态加载数据库中图片信息给浏览器，并通过2个叠词div实现图片的淡进淡出效果。重点在于解决json数组操作的难点，包括大图容器的样式设置、小图导航的交互逻辑以及大图与小图之间的联动。通过异步请求加载图片，实现了流畅的图片浏览体验。

原理：AJAX动态加载数据库中图片信息给游览器，利用2个叠词div动态修改内部图片透明度做出淡进淡出效果。（IE6无效)

难点：json数组操作。

HTML：就是几个图片容器。加载大图的div position: absolute;

<body>
    <!--小图-->
    <div id="thumbs">
    <div id="lastthumbs"></div>
    <div id="thumbsnav"></div>
    <div id="nextthumbs"></div></div>
    <!--大图-->
    <div id="photo">
        <div id="lastphoto"></div>
        <div id="photocontent"><div id="below"><img alt="lidy" src="#"/></div><div id="above"><img alt="lidy" src="#"/>
        </div><div id="msg"><p>得瑟得瑟</p><input type="button" value="确定" onclick="msg(0)"/></div><ul><li></li><li></li></ul></div>
        <div id="nextphoto"></div>
    </div>
</body>

CSS:加载大图的div position: absolute;

View Code

   <style type="text/css">
        body {
            text-align: center;
            margin: 0px auto;
        }
        /*小图*/
        #lastthumbs {
            float: left;
            margin-top:20px;
            width:22px;
            height:50px;
            cursor: pointer;
            background:url(images/icon_2.png) no-repeat -179px -181px;
        }
        #thumbsnav {
            float: left;
            margin-left:10px;
        }
         #thumbsnav span {
                cursor: pointer;
            }
        #nextthumbs {
            float:right;
            margin-top:20px;
            width:22px;
            height:50px;
            cursor: pointer;
            background:url(images/icon_2.png) no-repeat -197px -181px;
        }          
        #thumbs {
            margin: 20px auto;
            width: 1020px;
            height: 80px;
        }
            #thumbs span {
                border: 2px solid red;
                margin-left:10px;
                display:inline-block;
                height: 80px;
            } 
        /*大图*/
        #photo {
            clear:both;
            margin: 0px auto;
            width: 1000px;
            height:600px;
        }
            #photo div {
                height:500px;
            }
        #lastphoto {
         margin-top:50px;
         float:left;
         width:100px;
         height:350px !important;
         cursor:pointer;
         background:url(images/icon_2.png) no-repeat -295px 0px;   
        }
        #nextphoto {
         margin-top:50px;
         float:left;
         width:100px;
          height:350px !important;
         cursor:pointer;
          background:url(images/icon_2.png) no-repeat -408px 0px;      
        }
        #photocontent {
           float:left;
           width:800px;
           position:relative;
        }
            #photocontent ul {
                list-style-type: none;
                margin-top:460px;
            }
        #below {
            position: absolute;
            width:800px;
              left:0px;
            top:0px;
        }
        #above {
            position: absolute;
            width:800px;
            left:0px;
            top:0px;
        }
        /*提示消息*/
        #msg {
            position: absolute;
            display:none;
            top:200px;
            left:350px;
            border:2px solid #888;
            height:90px !important;
            background-color:white;
        }
    </style>

JS :看代码

View Code

        var num = 0; //当前图片
        var link = 0; //当前滚动条序号
        var btnstop = true; //按钮
        var datas; //json数据
        var count; //图片总数
        function photoload(index) { //图片加载
            if (btnstop) { //防止多次点击
                btnstop = false;
                $("#below img").attr("src", datas[num].photo_url); //当前图片到下层
                num = index; //更新当前索引
                var objImagePreloader = new Image();
                objImagePreloader.onload = function () { //当图片加载完成时
                    $("#above img").css("opacity", "0"); //先隐藏上层图片
                    $('#above img').attr('src', datas[index].photo_url); //设置下载好的图片到上层
                    $("#photocontent ul li:eq(0)").html("地点：" + datas[index].photo_source); 
                    $("#photocontent ul li:eq(1)").html("介绍：" + datas[index].photo_info); //介绍
                    $("#above img").animate({ //上层图片淡进
                        opacity: 1.0
                    }, 1500, function () {
                        btnstop = true;  // 动画完成
                    });
                    $("#below img").animate("opacity", "0", 1500); //下层图片淡出
                }
                objImagePreloader.src = datas[index].photo_url; //要加载的图片的地址
            }
        }

        function nextthumbs() { //下一组小图片加载
            if (link < parseInt(count / 7)) { //判定是否超出总数
                link++;
                $.post("photo.ashx", { "num": link }, //异步请求下一组图片地址
                      function (data) {
                          datas = datas.concat($.parseJSON(data)); //合并当前的数据和加载的数据
                          var img = $("#thumbsnav img"); //获取小图片DOM对象
                          for (i = link * 7; i < (link + 1) * 7; i++) { //遍历新数据，取出设置小图地址
                              if (i < count) { //判定是否超出总数
                                  var purl = datas[i].photo_url.split("/"); //取出来的是大图地址，小图地址要加上thumbs文件夹
                                  img[i % 7].index = i;
                                  img[i % 7].src = purl[0] + "/thumbs/" + purl[1];
                                  img[i % 7].onclick = function () { //设置新的点击事件的图片索引
                                      photoload(this.index);
                                  };
                              }
                              else { //已到最后
                                  img[i % 7].src = "images/thumbs/1.gif";
                              }
                          }
                      })
            }
            else {
                msg(2);
            }
        }

        function lastthumbs(){ //上一组图片，不需要加载了。
                if (link > 0) {
                    link--;
                    var img = $("#thumbsnav img");
                    for (i = link * 7; i < (link + 1) * 7; i++) { //遍历新数据，取出设置小图地址
                        var purl = datas[i].photo_url.split("/");
                        img[i % 7].index = i; //设置索引
                        img[i % 7].src = purl[0] + "/thumbs/" + purl[1];
                        img[i % 7].onclick = function () { //设置新的点击事件的图片索引
                            photoload(this.index);
                        };
                    }
                }
            }

        function nextphoto() {  //加载下一张图片
            $("#below img").attr("src", datas[num].photo_url); //当前图片到下面的元素
            num++;
            var objImagePreloader = new Image(); //图片加载对象
            objImagePreloader.onload = function () { //图片加载完成
                $("#above img").css("opacity", "0"); //上层图片隐藏
                $('#above img').attr('src', datas[num].photo_url); //设置加载好的地址
                $("#photocontent ul li:eq(0)").html("地点：" + datas[num].photo_source);
                $("#photocontent ul li:eq(1)").html("介绍：" + datas[num].photo_info); //介绍
                $("#above img").animate({  //慢慢显示
                    opacity: 1.0
                }, 1500, function () {
                    btnstop = true;  // 动画完成
                });
                $("#below img").animate("opacity", "0", 1500); //慢慢隐藏
            }
            objImagePreloader.src = datas[num].photo_url; //加载图片的地址
        }

        function lastphoto() { //加载上一张图片
            $("#below img").attr("src", datas[num].photo_url);
            num--;
            var objImagePreloader = new Image();
            objImagePreloader.onload = function () { //图片加载完成
                $("#above img").css("opacity", "0");
                $('#above img').attr('src', datas[num].photo_url);
                $("#photocontent ul li:eq(0)").html("地点：" + datas[num].photo_source);
                $("#photocontent ul li:eq(1)").html("介绍：" + datas[num].photo_info);
                $("#above img").animate({ 
                    opacity: 1.0
                }, 1500, function () {
                    btnstop = true; // 动画完成，按钮启用
                });
                $("#below img").animate("opacity", "0", 1500); //淡出
            }
            objImagePreloader.src = datas[num].photo_url; //加载图片的地址
        }

        function msg(index) { //窗口消息
            $("#msg").css("display", "block");
            if (index == 0) {
                $("#msg").css("display", "none");
            }
            else if (index == 1) {
                $("#msg p").html("已到第一张图片");
                setTimeout(function () { $("#msg").css("display", "none"); }, 5000);
            }
            else {
                $("#msg p").html("已到最后一张图片");
                setTimeout(function () { $("#msg").css("display", "none"); }, 5000);
            }
        }
        $(document).ready(function () {//这里最好不要用$()取代
            if (count == null) { //第一次加载
                $.post("photo.ashx", { "count": 0 }, function (data) { //获取总的数量
                    count = parseInt(data);
                });
            }
            $.post("photo.ashx", { "num": "0" }, //请求第一组图片数据
                function (data) {
                    datas = $.parseJSON(data); //实例化json
                    $("#above img").attr("src", datas[num].photo_url); //开始显示的图片地址
                    $("#photocontent ul li:eq(0)").html("地点：" + datas[num].photo_source);
                    $("#photocontent ul li:eq(1)").html("介绍：" + datas[num].photo_info); //开始显示的图片介绍
                    var thumbs = $("#thumbsnav");//小图Dom
                    for (i = 0; i < 7; i++) { //遍历第一组小图加载地址
                        var purl = datas[i].photo_url.split("/");
                        var span = "<span><img onclick='photoload("+i+")' alt='lidy' src='" + purl[0] + "/thumbs/" + purl[1] + "' /></span>";
                        thumbs.append(span); //加入Dom
                    }
                }
            );

            $("#nextthumbs").click(function () { //下一组小图
                nextthumbs();
            });

            $("#lastthumbs").click(function () { //上一组小图
                lastthumbs();
            }
                );

            $("#nextphoto").click(function () { //下一幅图片
                if (btnstop) { //防止多次点击
                    if (num < count - 1) { //判定超出总数 
                        btnstop = false;                      
                        if (parseInt((num + 1) / 7) > link) { //超出当前的7张图片的话，要更新小图
                            link++; //累加小图轮数
                            $.post("photo.ashx", { "num": link }, //请求下一组图片数据
                                  function (data) {
                                      datas = datas.concat($.parseJSON(data)); //合并到现在的数据
                                      nextphoto(); //加载下一轮大图了
                                      var img = $("#thumbsnav img");
                                      for (i = link * 7; i < (link + 1) * 7; i++) { //遍历显示下一组的小图
                                          if (i < count) { //判定最后几张图不满7张的话
                                              var purl = datas[i].photo_url.split("/");
                                              img[i % 7].index = i;
                                              img[i % 7].src = purl[0] + "/thumbs/" + purl[1];
                                              img[i % 7].onclick = function () { //更新点击事件图片地址索引
                                                  photoload(this.index);
                                              };
                                          }
                                          else { //显示其他的图片
                                              img[i % 7].src = "images/thumbs/1.gif";
                                          }
                                      }
                                  })
                        }
                        else {
                            nextphoto(); //如果不用加载下一组图片
                        }
                    }
                    else {
                        $("#msg").css("display", "block");
                    }
                }
            })

            $("#lastphoto").click(function () { //加载上一张大图
                if (btnstop) {
                    if (num > 0) { //如果不是第一张
                        btnstop = false;
                        if (parseInt((num - 1) / 7) < link) {  //如果是这组的第一张，要加载上一组的小图片
                            lastthumbs(); //加载上一组小图片
                        }
                        lastphoto();//加载上一张图片
                    }
                    else {
                        msg(1); //第一张图片显示提示
                    }
                }
            })
        })

后台处理程序photo.ashx：（请求json数据和图片总数）

View Code

 public void ProcessRequest(HttpContext context)
    {
        string num = context.Request["num"];
        int inum;
        if (num != null)
        {
            if (int.TryParse(num, out inum))
            {
                SqlParameter[] sqlp = new SqlParameter[]{ //获取7行数据
                new SqlParameter("@min",SqlDbType.Int),
                new SqlParameter("@max",SqlDbType.Int)
                };
                sqlp[0].Value = inum*7;
                sqlp[1].Value = (inum+1)*7;
                DataSet ds = SqlHelper.ExecuteDataset(SqlHelper.connectionString, "proc_photolinks", sqlp);
                context.Response.Write(Dataset2Json(ds)); //转成Json
            }
            else
            {             
                context.Response.Write("h");
            }
        }
        else if (context.Request["count"]!=null)
        {
            context.Response.Write(SqlHelper.ExecuteScalar(SqlHelper.connectionString, "proc_photocount").ToString());
        }
        else{
            
        }
    }
    
    public static string Dataset2Json(System.Data.DataSet ds)
    {
        StringBuilder json = new StringBuilder();
        json.Append("[");
        foreach (System.Data.DataTable dt in ds.Tables)
        {
            json.Append(DataTable2Json(dt));
            json.Append(",");
        }
        json.Remove(json.Length - 1, 1);
        json.Append("]");
        return json.ToString();
    }
    public static string DataTable2Json(System.Data.DataTable dt)
    {
        StringBuilder jsonBuilder = new StringBuilder();
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            jsonBuilder.Append("{");
            for (int j = 0; j < dt.Columns.Count; j++)
            {
                jsonBuilder.Append("\"");
                jsonBuilder.Append(dt.Columns[j].ColumnName);
                jsonBuilder.Append("\":\"");
                jsonBuilder.Append(dt.Rows[i][j].ToString().Replace("\"", "\\\"").Trim()); //对于特殊字符，还应该进行特别的处理。 
                jsonBuilder.Append("\",");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            jsonBuilder.Append("},");
        }
        jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
        return jsonBuilder.ToString();
    } 
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }