<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html,
body {
margin: 0;
height: 100%;
}
div {
border: 1px solid;
}
#container {
height: 100%;
}
#div1 {
display: none;
position: absolute;
background: #AAA;
top: 0;
left: 0;
min-width: 300px;
}
#div1 div.left {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
#div1 div.right {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.current {
margin-left: 100px
}
</style>
</head>
<body>
<div id=‘container‘>
<a class="photo" i=‘1‘ href="/css/img/a.png">aaaaaaaaaaaaa</a>
<br/>
<a class="photo" i=‘2‘ href="/css/img/c.png">bbbbbbbbbbbbb</a>
<br/>
<a class="photo" i=‘3‘ href="/css/img/m.png">cccccccccccccc</a>
<br/>
<a class="photo" i=‘4‘ href="/css/img/p.png">ddddddddddddd</a>
<br/>
</div>
<div id=‘div1‘>
<div id="left" class="left"> 上一张</div>
<div>
<span class="current">0</span>/<span class="total">0</span>
<br />
<img id=‘img1‘ src="/css/img/p.png" i=‘0‘ />
<br />
<span class="current">0</span>/<span class="total">0</span>
</div>
<div id="right" class="right">下一张</div>
</div>
<script src="js/zepto.js"></script>
<script src="js/touch.js"></script>
<script>
var photoCount = $(".photo").length;
$(".total").text(photoCount);
$(".photo").tap(function() {
showPhoto($(this));
return false;
});
$("#left").tap(prev);
$("body").swipeRight(prev);
function prev() {
var i = parseInt($("#img1").attr("i")) - 1;
if (i > 0) {
var prev = $(‘.photo[i="‘ + i + ‘"]‘);
showPhoto(prev);
}
}
$("body").swipeLeft(next);
$("#right").tap(next);
function next() {
var i = parseInt($("#img1").attr("i")) + 1;
if (i <= photoCount) {
var next = $(‘.photo[i="‘ + i + ‘"]‘);
showPhoto(next);
}
}
function showPhoto(a) {
$(‘#div1‘).show();
var src = a.attr("href");
if (src) {
var i = a.attr("i");
$("#img1").attr("src", src);
$("#img1").attr("i", i);
$(".current").text(i);
return true;
}
return false;
}
$("#container").tap(function(){
$(‘#div1‘).hide();
});
</script>
</body>
</html>
时间： 2024-10-12 14:30:04