0

我正在开发一个应用程序,我需要在其中实现分页以更改图像。我正在使用的代码是。

索引.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 张图像,当我单击同一页面中的下一个按钮或上一个按钮时,需要使用分页技术更改数据。在这里,我获取了静态数据,但在我的应用程序中,数据在运行时来自服务器。所以,我需要创建动态数据。

根据链接分页链接here一次获取一张图像。但我想要大约 6-10 张图片,如下图所示。当我点击下一个按钮页面需要相同但数据必须根据分页链接更改。

在此处输入图像描述 任何人都可以帮助我了解如何获得那种类型的分页技术以及如何创建 div 和图像标签(和标签)的动态数据,因为我希望按照下面显示的黑莓图像查看视图。提前致谢..

4

2 回答 2

2

这是一个相当合乎逻辑的功能。首先,我假设您使用限制 SELECT * FROM imagesORDER BY timeDESC LIMIT 0, 9使用 SQL 提取数据

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

PHP:

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

SQL:

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

这就是它的基本要点。

于 2012-07-05T10:51:55.413 回答
1

您可以尝试以下 URL 作为参考。

http://cssglobe.com/lab/easypaginate/02.html

谢谢

于 2012-07-05T10:45:57.963 回答