我正在开发一个应用程序,我需要在其中实现分页以更改图像。我正在使用的代码是。
索引.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 和图像标签(和标签)的动态数据,因为我希望按照下面显示的黑莓图像查看视图。提前致谢..