0

我正在开发一个应用程序,我需要实现分页更改图像。我正在使用的代码是。分页在jquery或jQuery的移动

的index.html

<head> 

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 

<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" /> 
</head> 

<body> 

<div class="imagesScreen" id="imagesScreen"> 

      <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" /> 
      <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" /> 
      <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" /> 
      <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" /> 
      <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" /> 
      <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" /> 
      <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" /> 
      <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" /> 
      <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" /> 
      <img style="border-radius:10px;height:70px;width:70px;margin:10px;" src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />    
</div> 


</body> 
</html> 

这里按照上述代码我有在页脚标签(未提及上面的代码)两个按钮。在每一页我想要显示6-10图像0​​当我点击下一个按钮或上一个按钮在同一页面数据需要改变使用分页技术。在这里,我采取了静态数据,但在我的应用程序中,数据来自运行时的服务器。所以,我需要创建动态数据。

根据链接Pagination link在这里一次获取一个图像。但我想要根据下面的图片大约6-10张图片。当我点击下一个按钮页面需要相同,但数据必须根据Pagination link更改。

enter image description here 任何人都可以请帮我这如何让这种类型的分页技术&如何创建DIV &图像标签(&标签)的动态数据,因为我想视图按显示的下方黑莓形象。 在此先感谢..

+1

看看这个答案:http://stackoverflow.com/questions/5260029/jquery-image-pagination.You可以从服务器获取图像链接。 – 2012-07-05 10:51:56

回答

2

这是一个相当合理的特点。首先,我假设你正在使用的限制 SELECT *与SQL拉动数据从images ORDER BY time DESC LIMIT 0,9

我假设你正在使用PHP的服务器端脚本,如果不是,请尝试将其用于您的语言。 假设我们有一个GET的值,它使用page=123作为页面ID,当然123是一个任意数字;我们需要拉开从page number * items per page开始的图像,例如,在第2页,我们得到2 * 9这就是18,所以我们的第一张图应该是图片18。现在我只是继续采取正确的LIMIT子句中的SQL查询:

PHP:

$start = $_GET['page'] * $items_per_page; 

SQL:

SELECT * FROM `images` ORDER BY `time` DESC LIMIT {$start}, {$items_per_page} 

这是它的基本精神。

+1

与我即将回答的非常相似。 +1 – Th0rndike 2012-07-05 10:52:58