iscroll典型的实例
这是关于iscroll，比较典型的实例demo。感兴趣的话，自己可以试试...
[task]<!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>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no"/>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,pre,form,input,button{margin:0; padding:0;}
table{border-collapse:collapse;border-spacing:0;}
h2{font-size:14px;}
ul,ol{list-style:none;}
body{font-size:14px;/*width:320px;*/margin:0 auto;color:#6c6c6c; font-family:"微软雅黑",Helvetica;}
fieldset,img{border:0;}
img{/*vertical-align:middle;*/}
input,textarea{ border:none 0;}
a{text-decoration:none; color:#666;}
.ad{height:124px;width:250px;box-shadow:2px 2px 10px #ececec; text-align:center; position:relative; margin:0 auto;}
.ad_tip{width:80px; height:20px;position:absolute;top:110px; left:50%;}
.ad_tip a{ margin-right:5px;float:left;width:5px; height:5px;text-indent:-9988px;background:#9CC; border-radius:20px 20px 20px 20px;}
.ad_tip a.active{background:#004a86;}
.ad_img{ width:250px;overflow:hidden; margin:0 auto;}
#scroller{width:500px; height:100%;}
.pic{width:100%; height:100%;}
.pic li{float:left; width:250px; height:124px;background:#0099FF;}
.ad span.pre{display:block;width:35px; height:124px;position:absolute;top:0;right:250px;}
.ad span.nexts{display:block;width:35px; height:124px;position:absolute;top:0;left:250px;}
.ad span.pre:before,.ad span.nexts:after{content:"";position:absolute;top:45%;left:12px;width:10px;height:10px;border-style:solid;border-width:0 3px 3px 0;}
.ad span.nexts:after{-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg);}
.ad span.pre:before{-webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg);}
.pic-list li a:after{content:''; position:absolute; right:5px;top:48%; width:7px; height:7px; border-color:#435734; border-style:solid; border-width:0 2px 2px 0;
-webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); background:transparent;}
.ad span.pre:before{left:10px;}
.ad a.nexts:after{right:10px;}
.numb a.first:hover{color:#00CC99;}
</style>
</head>
<body>
<div class="ad">
<span class="nexts" onclick="myScroll.scrollToPage('next', 0);return false" >点击向左边</span>
<span class="pre" onclick="myScroll.scrollToPage('prev', 0);return false" >点击向右边</span>
<div class="ad_img" id="wrapper">
<div id="scroller">
<ul class="pic">
<li><a href="/">左右左右左右左右左右左右</a></li>
<li><a href="/">左右左右左右左右左右左右</a></li>
</ul>
</div>
<div class="ad_tip">
<a class="active" href="/">1</a><a href="/">2</a>
</div>
</div>
</div>
</body>
<script src="js/iscroll.js" type="text/javascript"></script>//这里需要引入iscroll这个插件的文件
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function () {
document.querySelector('.ad_tip > a.active').className = '';
document.querySelector('.ad_tip > a:nth-child(' + (this.currPageX+1) + ')').className = 'active';
}
});
}
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
</html>
[/task]
