利用移动设备上的滑动功能浏览图像阵列

Utilize swiping function on mobile device to navigate array of images

本文关键字：功能 浏览 图像 阵列 移动      更新时间：2023-09-26

我正在制作一个简单的在线公文包，该公文包显示数组中的单个图像，并带有相应的标题和指向数组中下一个或上一个图像的链接。我想利用移动设备的刷屏功能，这样在这种设备上查看网站的人就不必使用超链接来查看下一个或上一个图像（链接很小，超链接会触发iPhone上的导航栏，这会造成破坏）。有没有办法制作到另一个页面的滑动运动链接，或者我需要在一个页面上拥有所有可用的图像，并使用JS一次显示一个图像，同时隐藏其他图像？

以下是相关代码：

<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
<tr valign="middle"><td align="center" colspan="2">
    <img src="31.jpg" width="40%" style="padding-top:38px; max-width:672px">
</td></tr>
<tr valign="bottom"><td style="padding:0 0 22 16" height="38">
    Cover for a book of photographs
</td><td align="right" style="padding:0 16 22 0">
    <a href="10.html">&lt;</a>&nbsp; 01 / 10 &nbsp;<a href="2.html">&gt;</a>
</td></tr>
</table>

您可以通过以下方式使用TouchSwipe Jquery插件：

$("#panelElement").swipe({
    swipeLeft: function(){
        $("a#anchorNextImage").trigger("click");
    },
    swipeRight: function(){
        $("a#anchorPreviousImage").trigger("click");
    }
});

希望能有所帮助。

相关文章：