<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>testpaginationpage1</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').cycle({
fx: 'fade',
timeout: 0,
next: '#next',
prev: '#prev'
});
});
</script>
</head>
<style type="text/css">
#slider {
height: 719px;
width: 877px;
position: absolute;
top: 149px;
}
#apDiv1 {
position: absolute;
left: 202px;
top: 63px;
width: 181px;
height: 78px;
z-index: 1;
}
#paginationcontainer {
position: relative;
}
#apDiv2 {
position: absolute;
left: 204px;
top: 67px;
width: 80px;
height: 69px;
z-index: 2;
}
#current {
position: relative;
}
#apDiv3 {
position: absolute;
left: 312px;
top: 67px;
width: 87px;
height: 68px;
z-index: 3;
}
.total {
position: relative;
}
#apDiv4 {
position: absolute;
left: 12px;
top: 62px;
width: 180px;
height: 79px;
z-index: 4;
}
#prevnextcontainer {
position: relative;
}
#apDiv5 {
position: absolute;
left: 14px;
top: 65px;
width: 90px;
height: 71px;
z-index: 5;
}
#prev {
position: relative;
}
#apDiv6 {
position: absolute;
left: 107px;
top: 65px;
width: 82px;
height: 72px;
z-index: 6;
}
#next {
position: relative;
}
#slider {
overflow: hidden;
height: 719px;
width: 877px;
position: absolute;
}
#slider {
height: 719px;
width: 877px;
}
.prev {
}
next {
}
current slide number {
}
total slide number {
}
#apDiv7 {
position: absolute;
left: 287px;
top: 66px;
width: 21px;
height: 75px;
z-index: 7;
}
#backslash {
position: relative;
}
</style>
</head>
<body>
<div id="slider"><img src="mobydick%3A1.jpg" width="877" height="719" /><img src="bravenewworld%3A2.jpg" width="877" height="719" /><img src="lordoffliess%3A3.jpg" width="877" height="719" /></div>
<div id="apDiv1"></div>
<div id="apDiv2">
<h1 id="current slide no+"> </h1>
</div>
<div id="apDiv3">
<h1 id="+total"> </h1>
</div>
<div id="apDiv4"></div>
<div id="apDiv5">
<h1 id="prev">prev</h1>
</div>
<div id="apDiv6">
<h1 id="next">next</h1>
</div>
<div id="apDiv7">
<h1>/</h1>
</div>
</body>
</html>