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

时间:2013-10-31 17:36:56

标签: javascript jquery html

我正在使用ASP.NET网站,似乎无法找到一个好的解决方案。我想创建一个jQuery图像滑块,循环浏览添加到我的数据库的最后3个图像。我曾尝试在网上查看教程,但似乎都没有解决只从数据库中提取最新内容的问题。有什么建议吗?

1 个答案:

答案 0 :(得分:3)

查看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) & '" alt="" />')
  Loop

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

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

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