手机幻灯

标签：

html

=====================================

<div class="box">
<ul id="slider" class=‘slider‘>
<li class=‘a‘>1</li>
<li class=‘b‘>2</li>
<li class=‘c‘>3</li>
<li class=‘d‘>4</li>
<li class=‘e‘>5</li>
</ul>
<div class=‘dot‘ id=‘dot‘>
<ul>
<li class=‘current‘>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>

css

=====================================

body { margin: 0; }
.box { width: 100%; overflow: hidden;position: relative; }
ul,li { margin: 0; padding: 0; list-style: none; }
.box .slider { width: 500%; overflow: hidden; transition: .5s; }
.box .slider li { width: 20%; float: left; }
.box .slider li { font-size: 40px; color: #fff; text-align: center; line-height: 150px; }
.box .dot{position: absolute;left: 40%;bottom: 10%;width: 300px;}
.box .dot li{float: left;width: 10px;height: 10px;border-radius:50%;border:1px solid #333;text-indent: -999px;margin: 0 2px;background: #fff;}
.box .dot .current{border:1px solid red;}

js

====================================

window.onload = function() {
var oUl = document.getElementById(‘slider‘);
var aLi = oUl.getElementsByTagName(‘li‘);
var dot=document.getElementById(‘dot‘);
var dotLi = dot.getElementsByTagName(‘li‘);

var sX = 0; // 手指初始x坐标
var sLeft = 0; // 初始位移
var index = 0;
var curLeft = 0; // 当前位移
var disX = 0; // 滑动差值

var timer=null;

timer=setInterval(autoPlay,6000); //自动轮播

oUl.addEventListener(‘touchstart‘, touchstart, false);

function touchstart(e) {
clearInterval(timer);
e.preventDefault();
sX = e.changedTouches[0].pageX;

// 计算初始位移
sLeft = oUl.style.transform ? -parseInt(/\d+/.exec(oUl.style.transform)[0]) : 0;
oUl.style.transition = ‘none‘;

document.addEventListener(‘touchmove‘, touchmove, false);
document.addEventListener(‘touchend‘, touchend, false);
}

function touchmove(e) {
disX = e.changedTouches[0].pageX - sX;
curLeft = sLeft + disX;
oUl.style.transform = ‘translateX(‘ + curLeft + ‘px)‘;
}

function touchend(e,b) {
if (disX > 100) {
if (index != 0) {
index -= 1;
}
}
if (disX < -100) {
if (index != aLi.length - 1) {
index += 1;
};
};
oUl.style.transition = ‘.5s‘;
oUl.style.transform = ‘translateX(‘ + -index*aLi[0].offsetWidth + ‘px)‘;
showBtn(index);
timer=setInterval(autoPlay,6000);
}

function autoPlay(){
index=index<aLi.length-1?++index:0;
oUl.style.transform = ‘translateX(‘ + -index*aLi[0].offsetWidth + ‘px)‘;
showBtn(index);
}
function showBtn(index){
console.log(index);
for(var i=0;i<dotLi.length;i++){
dotLi[i].classList.remove(‘current‘);
}
dotLi[index].classList.add(‘current‘);
}

}

手机幻灯

标签：

原文地址：http://www.cnblogs.com/wz0107/p/5046372.html