jQuery实现点击缩略图显示大图片并带有左右滑动

最新推荐文章于 2025-07-01 09:10:11 发布

qizhichao110

最新推荐文章于 2025-07-01 09:10:11 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery知识点

本文链接：https://blog.youkuaiyun.com/qizhichao110/article/details/8902479

JQuery知识点专栏收录该内容

32 篇文章

订阅专栏

本文介绍了如何将图片路径存储在数据库中，并通过后台程序读取出来，点击缩略图显示大图的功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

把图片的路径写在数据库中，然后通过后台程序读取出来，并且点击缩略图显示大图，

<head>
    <title></title>
   <style type="text/css">
    #mydiv ul{ list-style-type:none;}
    #mydiv ul li{ display:inline;}
    #mydiv{ width:500px; border:solid 1px #444; background-color:#333;}
    </style>
    <link href="css/nf.lightbox.css" rel="stylesheet" type="text/css" />
    <script src="js/Jquery1.7.js" type="text/javascript"></script>
    <script src="js/NFLightBox.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //var settings = { containerResizeSpeed: 3000 };
            $('#mydiv ul a').lightBox({ containerResizeSpeed: 1000 });

        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="mydiv" runat="server">
</div>
    </form>

</body>

namespace jquery知识点
{
    public partial class demo3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                string constr = ConfigurationManager.ConnectionStrings["sqlcon"].ConnectionString;
                SqlConnection conn = new SqlConnection(constr);
                conn.Open();
                SqlCommand cmd = new SqlCommand();
                cmd.Connection = conn;
                cmd.CommandText = "select mingcheng,datu from T_Demo";
                SqlDataAdapter adapter = new SqlDataAdapter(cmd);
                DataTable dt = new DataTable();
                adapter.Fill(dt);
                cmd.Dispose();
                conn.Dispose();
                StringBuilder sb = new StringBuilder();
                string img = string.Empty;
                //遍括历输出
                sb.Append("<ul>");
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    sb.Append("<a href="+dt.Rows[i]["datu"]+">");
                    sb.Append("<li>");
                    sb.Append("<img src="+dt.Rows[i]["mingcheng"]+">");
                    sb.Append("</li>");
                    sb.Append("</a>");
                }
                sb.Append("</ul>");
                mydiv.InnerHtml = sb.ToString();
            }
        }
    }
}

</html>