<!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 + 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; 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; 10px; height:10px; margin-left:10px; margin-top:5px; opacity:0.5;}
#nav ul li.active{ background:#fff;opacity:1;}
.banner img{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="#"><img src="images/1.jpg" /></a>
</li>
<li>
<a href="#"><img src="images/2.jpg" /></a>
</li>
<li>
<a href="#"><img src="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 = " " + document.body.clientWidth + "px";
}
document.getElementById("scroller").style.cssText = " " + 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 = " " + document.body.clientWidth + "px";
}
document.getElementById("scroller").style.cssText = " " + document.body.clientWidth * count + "px";
};
</script>
</body>
</html>