無標題文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>10-5.觸控螢幕，或滑鼠拖曳，向左或向右滑動頁面的圖片：方法3：單一頁面＋絕對座標圖片</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>

$(document).ready(function()
{
//滑鼠按住向右滑，或觸控螢幕向右滑
$('body').bind('swiperight',function(event)
{
switch(pagenum)
{
case 0:
//設定目前圖片名稱
$('#img0').attr({src:"animal" + picnum + ".jpg"});
picnum -=1;
if(picnum <=0) picnum=4;
$('#img_1').attr({src:"animal" + picnum + ".jpg"});

//移動相關的兩個圖片
$('#img0').animate({left:document.body.clientWidth+10},500);
$('#img_1').animate({left:document.body.clientWidth/2-320},500);
$('#head01').html("圖片 animal" + picnum + ".jpg");
//設定第三圖片圖片位置
$('#img1').css('left','-700px');
//下回中央圖片所在img
pagenum = -1;
break;
case -1:
//設定目前圖片名稱
$('#img_1').attr({src:"animal" + picnum + ".jpg"});
picnum -=1;
if(picnum <=0) picnum=4;
$('#img1').attr({src:"animal" + picnum + ".jpg"});

//移動相關的兩個圖片
$('#img_1').animate({left:document.body.clientWidth+10},500);
$('#img1').animate({left:document.body.clientWidth/2-320},500);
$('#head01').html("圖片 animal" + picnum + ".jpg");
//設定第三圖片圖片位置
$('#img0').css('left','-700px');
//下回中央圖片所在img
pagenum = 1;
break;
case 1:
//設定目前圖片名稱
$('#img1').attr({src:"animal" + picnum + ".jpg"});
picnum -=1;
if(picnum <=0) picnum=4;
$('#img0').attr({src:"animal" + picnum + ".jpg"});

//移動相關的兩個圖片
$('#img1').animate({left:document.body.clientWidth+10},500);
$('#img0').animate({left:document.body.clientWidth/2-320},500);
$('#head01').html("圖片 animal" + picnum + ".jpg");
//設定第三圖片圖片位置
$('#img_1').css('left','-700px');
//下回中央圖片所在img
pagenum = 0;
break;
}

});

$('body').bind('swipeleft',function(event)
{
switch(pagenum)
{
case 0:
//設定目前圖片名稱
$('#img0').attr({src:"animal" + picnum + ".jpg"});
picnum +=1;
if(picnum >=5) picnum=1;
$('#img1').attr({src:"animal" + picnum + ".jpg"});

//移動相關的兩個圖片
$('#img0').animate({left:'-700px'},500);
$('#img1').animate({left:document.body.clientWidth/2-320},500);
$('#head01').html("圖片 animal" + picnum + ".jpg");
//設定第三圖片圖片位置
$('#img_1').css('left',document.body.clientWidth+10);
//下回中央圖片所在img
pagenum = 1;
break;
case 1:
//設定目前圖片名稱
$('#img1').attr({src:"animal" + picnum + ".jpg"});
picnum +=1;
if(picnum >=5) picnum=1;
$('#img_1').attr({src:"animal" + picnum + ".jpg"});

//移動相關的兩個圖片
$('#img1').animate({left:'-700px'},500);
$('#img_1').animate({left:document.body.clientWidth/2-320},500);
$('#head01').html("圖片 animal" + picnum + ".jpg");
//設定第三圖片圖片位置
$('#img0').css('left',document.body.clientWidth+10);
//下回中央圖片所在img
pagenum = -1;
break;
case -1:
//設定目前圖片名稱
$('#img_1').attr({src:"animal" + picnum + ".jpg"});
picnum +=1;
if(picnum >=5) picnum=1;
$('#img0').attr({src:"animal" + picnum + ".jpg"});

//移動相關的兩個圖片
$('#img_1').animate({left:'-700px'},500);
$('#img0').animate({left:document.body.clientWidth/2-320},500);
$('#head01').html("圖片 animal" + picnum + ".jpg");
//設定第三圖片圖片位置
$('#img1').css('left',document.body.clientWidth+10);
//下回中央圖片所在img
pagenum = 0;
break;

}

});

});
</script>

</head>

<body >

<div data-role="page" id="main">
<div data-role="header">
<h1 id ="head01">動物園的可愛動物</h1>
</div>

<div data-role="content">
<p>請觸控螢幕，或滑鼠拖曳，向左或向右滑動</p>
<p>觀看動物圖片</p>
<img src="animal1.JPG" id="img0" width="640" height="480" style="position:absolute;left:100px">
<img id="img1" style="position:absolute;left:1200px">
<img id="img_1" style="position:absolute;left:-700px">

</div>

</body>
</html>