首页 > 代码库 > App轮播图
App轮播图
<!doctype html><html><head> <meta charset="utf-8"> <title>手机轮播图</title> <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/> <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"/> <!-- 轮播图js --> <script type="text/javascript" src=http://www.mamicode.com/"http://files.cnblogs.com/xinlinux/iscroll.js"></script> <script src=http://www.mamicode.com/"http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head><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> body{margin:0px;} header{text-align:center; position:relative; overflow:hidden;} ul{ margin:0px; padding:0px;list-style: none;} #nav{ position:absolute; width:100%; height:20px; line-height:20px; bottom:0px;} #nav{ float:left; margin-right:5%; opacity:1;} #nav ul li{ float:left; background:#fff; border-radius:10px; width:10px; height:10px; margin-left:10px; margin-top:5px; opacity:0.5;} #nav ul li.active{ background:#fff;opacity:1;} .banner img{width:100%;} .banner ul li{ float:left;}</style><body> <div class="row-fluid"> <header> <div class="banner"> <div id="wrapper" style="overflow: hidden; "> <div id="scroller"> <ul id="thelist"> <li> <a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/1.jpg" /></a> </li> <li> <a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/2.jpg" /></a> </li> <li> <a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/3.jpg" /></a> </li> </ul> </div> </div> </div> <div id="nav"> <div id="prev" onclick="javascript:myScroll.scrollToPage(‘prev‘, 0);"></div> <ul id="indicator"> <li class="active"></li> <li ></li> <li ></li> </ul> <div id="next" onclick="javascript:myScroll.scrollToPage(‘next‘, 0, 400, 2);"></div> </div> <div class="clr"></div> </header> </div> <script> var count = document.getElementById("thelist").getElementsByTagName("img").length; for (i = 0; i < count; i++) { document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:" + document.body.clientWidth + "px"; } document.getElementById("scroller").style.cssText = " width:" + document.body.clientWidth * count + "px"; setInterval(function() { myScroll.scrollToPage(‘next‘, 0, 400, count); }, 3500); window.onresize = function() { for (i = 0; i < count; i++) { document.getElementById("thelist").getElementsByTagName("img").item(i).style.cssText = " width:" + document.body.clientWidth + "px"; } document.getElementById("scroller").style.cssText = " width:" + document.body.clientWidth * count + "px"; }; </script> </body></html>
App轮播图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。