h5 轮播图

王慧永 2015-11-02 13:46:11

13821

分类专栏： js jquery 文章标签：轮播图

本文链接：https://blog.csdn.net/u011072139/article/details/49585447

版权

CSS：

/*iscroll*/
.banner {width:100%;margin:0 auto;padding:0;position:relative;}
#wrapper {margin:0;width:100%;height:auto;float:left;position:relative;overflow:hidden;	}
#scroller {height:auto;float:left;padding:0;}
#scroller ul {list-style:none;display:block;float:left;width:100%;height:auto;padding:0;margin:0;text-align:left;}
#scroller li {display:block; float:left;width:auto; height:auto;text-align:center;font-size:0px;padding:0;position:relative;}
#scroller li a{display:block;padding:0;margin:0;}
#nav {margin-top: -15px;padding: 0;position:relative;width: auto;z-index: 3;float:right;margin-right:5px;}
#prev, #next {float:left;font-weight:bold;font-size:14px;padding:5px 0;width:80px;display: none;}
#next {float:right;text-align:right;}
#indicator > li {display:block; float:left;list-style:none;padding:0; margin:0;}
#indicator {display: block;margin: 0;padding: 0;width: auto;}
#indicator > li {width:8px; height:8px;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;background:rgba(255,255,255,0.5);overflow:hidden;margin-right:10px;}
#indicator > li.active {background:#89C921;}
#indicator > li:last-child {margin:0 8px 0 0;}

JS：

<pre name="code" class="javascript">iscroll.js

HTML：

<pre name="code" class="html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<title></title>
		<link rel="stylesheet" href="iscroll.css" />
	</head>
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="iscroll.js"></script>
	<body>
		<div class="banner">
			<div id="wrapper">
				<div id="scroller">
					<ul id="thelist">
						<li><a href="javascript:void(0)"><img src="4.jpg" /></a></li>
						<li><a href="javascript:void(0)"><img src="3.jpg" /></a></li>
						<li><a href="javascript:void(0)"><img src="2.jpg" /></a></li>
						<li><a href="javascript:void(0)"><img src="1.jpg" /></a></li>
					</ul>
				</div>
			</div>
			<div id="nav" class="nav1">
				<ul id="indicator">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class="clr"></div>
		</div>
		
		<script type="text/javascript">
var count = document.getElementById("thelist").getElementsByTagName("img").length;	

var count2 = document.getElementsByClassName("menuimg").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";
}

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>
		
	</body>
</html>