<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>10-2.觸控螢幕，或滑鼠拖曳，向左或向右滑動頁面的圖片：方法1：多頁面</title>
<link rel="stylesheet" href="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css">
<script src="jquery.mobile-1.4.2/jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript">
pagenum=1;
$(document).ready(function()
{
//滑鼠按住向右滑，或觸控螢幕向右滑
$('body').bind('swiperight',function(event)
{
switch(pagenum)
{
case 1:
pages="#main";
pagenum =2;
break;
case 2:
pages="#a1";
pagenum =3;
break;
case 3:
pages="#a2";
pagenum = 4;
break;
case 4:
pages="#a3";
pagenum = 5;
break;
case 5:
pages="#a4";
pagenum = 1;
break;
}
$.mobile.changePage(pages,{transition:'slide',reverse:true});
});
$('body').bind('swipeleft',function(event)
{
switch(pagenum)
{
case 1:
pages="#main";
pagenum =2;
break;
case 2:
pages="#a1";
pagenum =3;
break;
case 3:
pages="#a2";
pagenum = 4;
break;
case 4:
pages="#a3";
pagenum = 5;
break;
case 5:
pages="#a4";
pagenum = 1;
break;
}
$.mobile.changePage(pages,{transition:'slide',reverse:false});
});
});
</script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="header">
<h1>動物園的可愛動物</h1>
</div>
<div data-role="content">
<p>請觸控螢幕，或滑鼠拖曳，向左或向右滑動</p>
<p>觀看動物圖片</p>
</div>
<div data-role="footer">
<h1>保育動物</h1>
</div>
</div>
<div data-role="page" id="a1">
<div data-role="header" >
<h1>圖片一</h1>
</div>
<div data-role="content">
<img src="animal1.JPG" width="640" height="480">
</div>
<div data-role="footer">
</div>
</div>
<div data-role="page" id="a2">
<div data-role="header" >
<h1>圖片二</h1>
</div>
<div data-role="content">
<img src="animal2.JPG" width="640" height="480">
</div>
<div data-role="footer">
</div>
</div>
<div data-role="page" id="a3">
<div data-role="header" data-add-back-btn = "true" data-back-btn-text ="上一頁">
<h1>圖片三</h1>
</div>
<div data-role="content">
<img src="animal3.JPG" width="640" height="480">
</div>
<div data-role="footer">
</div>
</div>
<div data-role="page" id="a4">
<div data-role="header" data-add-back-btn = "true" data-back-btn-text ="上一頁">
<h1>圖片四</h1>
</div>
<div data-role="content">
<img src="animal4.JPG" width="640" height="480">
</div>
<div data-role="footer">
</div>
</div>
</body>
</html> |