無標題文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>10-6.使用左右按鈕，向左或向右滑動圖片</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=0;
picnum=1;

$(document).ready(function()
{
//滑鼠按住向右滑，或觸控螢幕向右滑
$('body').bind('swiperight',function(event)
{
dragright();
});

//按住向右箭頭，滑動圖片
$('#imgarrowRight').bind('click',function(event)
{
dragright();
});

//滑過向右箭頭，變顏色
$('#imgarrowRight').bind('mouseover',function(event)
{
$('#imgarrowRight').attr({src:"picArrow/right-1.gif"});
});

function dragright()
{
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)
{
dragleft();
});
//滑過向左箭頭，變顏色
$('#imgarrowLeft').bind('mouseover',function(event)
{
$('#imgarrowLeft').attr({src:"picArrow/left-1.gif"});
});
//按住向左箭頭
$('#imgarrowLeft').bind('click',function(event)
{
dragleft();
});

function dragleft()
{
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>

<style type="text/css">
img{
position:absolute;
}
</style>

</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">

<img id="imgarrowRight" src='picArrow/right-0.gif' style="position:absolute;left:95%;top:40%">
<img id="imgarrowLeft" src='picArrow/left-0.gif' style="position:absolute;left:3%;top:40%">

</div>

<div data-role="footer" style="position:absolute; bottom:0; left:0;width:100%">
<h1 >保育動物</h1>
</div>
</div>

</body>
</html>