<!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://files.cnblogs.com/xinlinux/iscroll.js"></script> <script src="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 + ) + ')').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:%; height:20px; line-height:20px; bottom:0px;} #nav{ float:left; margin-right:%; opacity:;} #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:;} .banner img{width:%;} .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="#"><img src="data:images/1.jpg" /></a> </li> <li> <a href="#"><img src="data:images/2.jpg" /></a> </li> <li> <a href="#"><img src="data: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 = ; 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', , , count);
}, );
window.onresize = function() {
for (i = ; 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>