移動端輪播圖
采用手機端頁面自適應解決方案—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>
