利用iscroll4实现轮播图效果实例代码

前言

iscroll之所以会诞生，主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。相信很多人和我一样，在使用iscroll的是时候只知道可以手动滑动，不知道iscroll的轮播怎么实现，那么以下就是我做的一个轮播效果，亲测有效；

一、html代码,当然可以动态添加下面的小圆点

<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>4Zeroth Law:</strong> <em>A robot may not harm humanity, or, by inaction, allow humanity to come to harm.</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> </ul> <div id="next" onclick="myScroll.scrollToPage('next', 0);return false">next →</div></div>

二、css代码

<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:100%; 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:100%; 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>