|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"> |
|
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> |
|
<meta
name="apple-mobile-web-app-capable"
content="yes"> |
|
<meta
name="apple-mobile-web-app-status-bar-style"
content="black"> |
|
<title>iScroll demo: Carousel</title> |
|
|
|
<script
type="text/javascript"
src="../../src/iscroll.js"></script> |
|
|
|
<script
type="text/javascript"> |
|
var myScroll; |
|
|
|
function loaded() { |
|
myScroll = new iScroll('wrapper', { |
|
snap: true, |
|
momentum: false, |
|
hScrollbar: false, |
|
onScrollEnd: function () { |
|
document.querySelector('#indicator > li.active').className = ''; |
|
document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active'; |
|
} |
|
}); |
|
} |
|
|
|
document.addEventListener('DOMContentLoaded', loaded, false); |
|
</script> |
|
|
|
<style
type="text/css"
media="all"> |
|
body,ul,li { |
|
padding:10px; |
|
margin:0; |
|
} |
|
|
|
body { |
|
font-size:12px; |
|
-webkit-user-select:none; |
|
-webkit-text-size-adjust:none; |
|
font-family:helvetica; |
|
} |
|
|
|
#wrapper { |
|
width:300px; |
|
height:160px; |
|
|
|
float:left; |
|
position:relative; /* On older OS versions "position" and "z-index" must be defined, */ |
|
z-index:1; /* it seems that recent webkit is less picky and works anyway. */ |
|
overflow:hidden; |
|
|
|
background:#aaa; |
|
-webkit-border-radius:10px; |
|
-moz-border-radius:10px; |
|
-o-border-radius:10px; |
|
border-radius:10px; |
|
background:#e3e3e3; |
|
} |
|
|
|
#scroller { |
|
width:2100px; |
|
height:100%; |
|
float:left; |
|
padding:0; |
|
} |
|
|
|
#scroller ul { |
|
list-style:none; |
|
display:block; |
|
float:left; |
|
width:100%; |
|
height:100%; |
|
padding:0; |
|
margin:0; |
|
text-align:left; |
|
} |
|
|
|
#scroller li { |
|
-webkit-box-sizing:border-box; |
|
-moz-box-sizing:border-box; |
|
-o-box-sizing:border-box; |
|
box-sizing:border-box; |
|
display:block; float:left; |
|
width:300px; height:160px; |
|
text-align:center; |
|
font-family:georgia; |
|
font-size:18px; |
|
line-height:140%; |
|
} |
|
|
|
#nav { |
|
width:300px; |
|
float:left; |
|
} |
|
|
|
#prev, #next { |
|
float:left; |
|
font-weight:bold; |
|
font-size:14px; |
|
padding:5px 0; |
|
width:80px; |
|
} |
|
|
|
#next { |
|
float:right; |
|
text-align:right; |
|
} |
|
|
|
#indicator, #indicator > li { |
|
display:block; float:left; |
|
list-style:none; |
|
padding:0; margin:0; |
|
} |
|
|
|
#indicator { |
|
width:110px; |
|
padding:12px 0 0 30px; |
|
} |
|
|
|
#indicator > li { |
|
text-indent:-9999em; |
|
width:8px; height:8px; |
|
-webkit-border-radius:4px; |
|
-moz-border-radius:4px; |
|
-o-border-radius:4px; |
|
border-radius:4px; |
|
background:#ddd; |
|
overflow:hidden; |
|
margin-right:4px; |
|
} |
|
|
|
#indicator > li.active { |
|
background:#888; |
|
} |
|
|
|
#indicator > li:last-child { |
|
margin:0; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<div
id="wrapper"> |
|
<div
id="scroller"> |
|
<ul
id="thelist"> |
|
<li><strong>1.</strong>
<em>A robot may not injure a human being or, through inaction, allow a human being to come to harm.</em></li> |
|
<li><strong>2.</strong>
<em>A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law.</em></li> |
|
<li><strong>3.</strong>
<em>A robot must protect its own existence as long as such protection does not conflict with the First or Second Law.</em></li> |
|
<li><strong>Zeroth Law:</strong>
<em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</em></li> |
|
<li><strong>Lyuben Dilov's Forth law:</strong>
<em>A robot must establish its identity as a robot in all cases.</em></li> |
|
<li><strong>Harry Harrison's Forth law:</strong>
<em>A robot must reproduce. As long as such reproduction does not interfere with the First or Second or Third Law.</em></li> |
|
<li><strong>Nikola Kesarovski's Fifth law:</strong>
<em>A robot must know it is a robot.</em></li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div
id="nav"> |
|
<div
id="prev"
onclick="myScroll.scrollToPage('prev', 0);return false">← prev</div> |
|
<ul
id="indicator"> |
|
<li
class="active">1</li> |
|
<li>2</li> |
|
<li>3</li> |
|
<li>4</li> |
|
<li>5</li> |
|
<li>6</li> |
|
<li>7</li> |
|
</ul> |
|
<div
id="next"
onclick="myScroll.scrollToPage('next', 0);return false">next →</div> |
|
</div> |
|
</body> |
|
</html> |