二话不说，直接上图，看效果
需要使用Iscroll
<script src="content/scripts/iscroll.js"></script>
示例代码
<!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 src="content/scripts/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"> #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; padding:0px 0px 0px 80px; margin:1px 2px 3px 4px; } #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:0px 0 0 30px; margin:-16px 2px 3px 4px; position:relative; /* On older OS versions "position" and "z-index" must be defined, */ z-index:2; /* it seems that recent webkit is less picky and works anyway. */ overflow:hidden; } #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><img style=" 280px;height: 160px;" src="content/images/slides/leaf.jpg"></li> <li><img style=" 280px;height: 160px;" src="content/images/slides/road.jpg"></li> <li><img style=" 280px;height: 160px;" src="content/images/slides/sea.jpg"></li> <li><img style=" 280px;height: 160px;" src="content/images/slides/shelter.jpg"></li> <li><img style=" 280px;height: 160px;" src="content/images/slides/tree.jpg"></li> <li><img style=" 280px;height: 160px;" src="content/images/slides/bridge.jpg"></li> <li><img style=" 280px;height: 160px;" src="content/images/slides/big_bunny_fake.jpg"></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>
代码示例包
声明：本博客高度重视知识产权保护，发现本博客发布的信息包含有侵犯其著作权的链接内容时，请联系我，我将第一时间做相应处理,联系邮箱ffgign@qq.com。
作者：Mark Fan (小念头) 来源：http://cube.cnblogs.com
说明：未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如有疑问，可以通过 ffgign@qq.com 联系作者，本文章采用 知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可
