如何从数据库中的图像创建 jQuery 滑块？

Posted 2023-05-08

【中文标题】如何从数据库中的图像创建 jQuery 滑块？

【英文标题】：How to create jQuery slider from images in a Database?

【发布时间】：2013-10-31 17:36:56

【问题描述】：

我正在开发一个 ASP.NET 网站，但似乎找不到一个好的解决方案。我想创建一个 jQuery 图像滑块，循环显示添加到我的数据库中的最后 3 张图像。我曾尝试查看网络上的教程，但似乎没有一个解决仅从数据库中提取最新添加的问题。有什么建议吗？

【问题讨论】：

所以你需要知道如何编写一个对数据进行排序并且只取一定数量记录的sql语句？

不，我很确定我可以编写 SQL。我只是不知道如何编写 jQuery/html 并引用我的数据库。

我想这取决于您要使用的幻灯片插件。我想你会使用 asp.net 在页面上创建一个图像列表，然后从 javascript 启动滑块插件。

【参考方案1】：

查看http://docs.dev7studios.com/jquery-plugins/nivo-slider 以获得可以在公司网站上使用的免费（MIT 许可）jQuery 插件的一个很好的例子。为了得到您想要的，让 ASP.NET 以 Nivo Slider 文档提供的格式回显图像列表。示例：

页面顶部：（来自http://www.go4expert.com/articles/connecting-mssql-server-aspnet-t2559/）

<%@ Page Language="VB" Debug="true" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

头：

<!-- The Nivo files can be downloaded from the link I provided above. -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() 
    $('#slider').nivoSlider();
);
</script>

主体：

<div id="slider" class="nivoSlider">
<!-- To connect to a MSSQL db comes from http://www.go4expert.com/articles/connecting-mssql-server-aspnet-t2559/ since I do not have prior knowledge on how to do this with ASP.NET -->
<%
  Dim myDataReader as SqlDataReader
  Dim mysqlConnection as SqlConnection
  Dim mySqlCommand as SqlCommand

  mySqlConnection = new SqlConnection("server=mssql.win-servers.com;user=dbuser;password=dbpwd;database=db")
  mySqlCommand = new SqlCommand("SELECT * FROM pictures ORDER BY id DESC LIMIT 3", mySqlConnection)
  mySqlConnection.Open()
  myDataReader = mySqlCommand.ExecuteReader(CommandBehavior.CloseConnection)


  Do While (myDataReader.Read())
    Response.Write('<img src="' & myDataReader.getString(1) & '"  />')
  Loop

  myDataReader.Close()
  mySqlConnection.Close()
%>
</div>

注意"SELECT * FROM pictures ORDER BY id DESC LIMIT 3" 查询。我从https://***.com/a/15425791 得到了关于如何选择表的最后 3 行的查询提示。此外，如果您想存储有关图像的更多信息（如标题），那么我建议将该信息添加到存储图像的表格行中。

我也不确定myDataReader.getString(1) 是否按我的预期工作。您必须找出从myDataReader.Read() 阅读的最佳方式。

【讨论】：

我已经搞砸了几个这样的例子。但是，它没有讨论如何访问数据库并显示一定数量的图像。

我认为“不，我很确定我可以编写 SQL”，你的意思也是 ASP.NET 代码。我很抱歉！我将编辑我的答案...