移动端轮播图实例

移动端轮播图

采用手机端页面自适应解决方案—rem布局

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,user-scalable=no">
	<title>移动端轮播图--cck</title>
<script type="text/javascript">
	// 手机端页面自适应解决方案—rem布局
	(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                docEl.style.fontSize = clientWidth / 15 + 'px';
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

	// 阻止pc和浏览器默认行为。
	document.addEventListener('touchstart',function(ev){
		ev.preventDefault();
	});
</script>
<style>
body{
	margin: 0;
}
.wrap{
	height: 8.4rem;
	position: relative;
}
.list{
	padding: 0;
	margin: 0;
	width:400%;
	position: absolute;
	top: 0;
	left: 0;
	list-style: none;
}
.list li{
	float: left;
	width: 15rem;
}
.list img{
	width: 15rem;
	display: block;
}
nav{
	width: 15rem;
	height: 10px;
	position: absolute;
	bottom: 10px;
	z-index: 1;
	text-align:center;
}
nav a{
	width:10px;
	height: 10px;
	display: inline-block;
	background: red;
	border-radius:50%;
	vertical-align:top;
}
nav a.active{
	background:#fff;
}

</style>
</head>
<body>
	<section class="wrap">
		<ul class="list">
			<li>
				<img src="http://img1.3lian.com/2015/a1/14/d/151.jpg" alt="" />
			</li>
			<li>
				<img src="http://photos.tuchong.com/110168/f/2034247.jpg" alt="" />
			</li>
			<li>
				<img src="http://img1.3lian.com/2015/a1/129/d/193.jpg" alt="" />
			</li>
			<li>
				<img src="http://img.kutoo8.com//upload/image/78018037/201305280911_960x540.jpg" alt="" />
			</li>
		</ul>
		<nav>
			<a href="javascript:;" class="active"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
		</nav>
	</section>
<script type="text/javascript">

	var wrap = document.querySelector('.wrap'),
		list = document.querySelector('.list'),
		a = document.querySelectorAll('a');
		disX = 0, // 按下的坐标
		listL = 0, // 当前按下的list的left值
		w = wrap.clientWidth, // 一张图片的宽度
		len = 0,
		n = 0; // 默认第一个小点为白色

	list.innerHTML += list.innerHTML;  // 将list复制一份
	len = list.children.length; // list节点数量的长度
	list.style.width = w * len +'px';


	list.addEventListener('touchstart', start);
	list.addEventListener('touchmove', move);
	list.addEventListener('touchend', end);

	function start (ev) {
		var e = ev.changedTouches[0]; // changedTouches  为涉及当前事件的手指的一个列表

		list.style.transition = 'none';
		disX = e.pageX; // e.pageX——手指所按位置相对整个页面的坐标

		/*
			手指按下时,判断是第几张图片,若为第一张,则快速拉到第五张上;若为最后一张张,则快速拉到第四张上
		*/

		var num = Math.round( list.offsetLeft / w );
		console.log(num)
		if(num == 0) {
			num = a.length;
			list.style.left = -num * w + 'px';
		}

		if(-num == len-1) {
			num = a.length - 1;
			list.style.left = -num * w + 'px';
		}		

		listL = this.offsetLeft;
	}

	function move (ev) {
		var e = ev.changedTouches[0];
		list.style.left = (e.pageX - disX) + listL +'px';
	}

	function end (ev) {
		var num = Math.round( list.offsetLeft / w ); // 当前需要显示的那一张图片的索引

		list.style.transition = '.5s';
		list.style.left = num * w +'px';

		a[n].className = '';
		a[-num % a.length].className = 'active';
		n = -num % a.length;
	}

</script>
</body>
</html>
posted @ 2017-10-25 19:28  Mr.曹  阅读(2083)  评论(0编辑  收藏  举报