首先是html: 代码如下
<div class="carousel" id="carousel"> <div class="imageList"> <ul> <li><a href="#"><img src="img/0.png"></a></li> <li><a href="#"><img src="img/1.png"></a></li> <li><a href="#"><img src="img/2.png"></a></li> <li><a href="#"><img src="img/3.png"></a></li> <li><a href="#"><img src="img/4.png"></a></li> </ul> </div> </div>
注意:以上图片请换成自己本地的图片!!! 记得加一个移动端的视口哦
接下来就是css代码:
*{ margin: 0; padding: 0; } body{ overflow: hidden; } .carousel{ width:100%; overflow: hidden; border:1px solid black; } .carousel ul{ list-style: none; } .carousel ul li{ position: absolute; top:0; left:0; width: 100%; } .carousel ul li img{ width:100%;
}
接下来就是js代码: 代码有点多 但是每一行都有注释
var carousel = document.getElementById('carousel'); var imageLis = document.querySelectorAll('#carousel ul li') //信号量 var idx=2; var next=3; var prev=1; var windowWidth; //初始化 init(); //窗口变化 window.onreset = init; function init() { //初始化,根据屏幕的变化,根据宽度计算轮播的高度 windowWidth = document.documentElement.clientWidth || document.body.clientWidth; //windowWidth / height = 200 /130; carousel.style.height = windowWidth / (200 / 130); //初始设置li的默认位置 for (var i=0; i<imageLis.length;i++){ imageLis[i].style.webkitTransform = 'translateX(' + windowWidth + 'px)'; } //去掉所有图片的过度,因为鼠标滑动时不需要过度 noneTransition(); //让当前三个信号量上一张,下一张,当前张确定位置 changex(); } function noneTransition() { imageLis[idx].style.transition = 'none'; imageLis[next].style.transition = 'none'; imageLis[prev].style.transition = 'none'; } function changex() { imageLis[idx].style.webkitTransform = 'translateX(0px)'; imageLis[next].style.webkitTransform = 'translateX(' + windowWidth + 'px)'; imageLis[prev].style.webkitTransform = 'translateX(' + -windowWidth + 'px)'; } //手指事件监听 carousel.addEventListener('touchstart',touchstartHandle,false); carousel.addEventListener('touchmove',touchmoveHandle,false); carousel.addEventListener('touchend',touchendHandle,false); //手指偏移量 var deltaX; //开始记录时手指的位置 var startX; //时间戳 var startTime; function touchstartHandle(event) { event.preventDefault(); //判断手指个数,如果大于1跟手指头,返回 if (event.touches.length > 1){ return; } //记录手指偏移量 deltaX = event.touches[0].clientX; //记录手指位置 startX = event.touches[0].clientX; //去掉过度 noneTransition(); //重新设置当前信号量的位置 changex(); //记录手指点下的时间 startTime = new Date(); } function touchmoveHandle() { event.preventDefault(); //判断手指数 if (event.touches.length > 1){ return; } //获得当前坐标 var clientX = event.touches[0].clientX - deltaX; //三张图片跟随手指的移动而移动 imageLis[idx].style.webkitTransform = 'translateX(' + clientX + 'px)'; imageLis[next].style.webkitTransform = 'translateX(' + (windowWidth + clientX) + 'px)'; imageLis[prev].style.webkitTransform = 'translateX(' + (-windowWidth + clientX) + 'px)'; } function touchendHandle(event) { event.preventDefault(); //判断滑动是否成功 //获取滑动距离 var distence = event.changedTouches[0].clientX - startX; //获取滑动时间 var time = new Date() - startTime; console.log(distence,time); //成功的条件 如果滑动的距离超过屏幕的一半,不管时间,表示成功 //如果滑动的时间小雨500毫秒且移动距离大于30像素 //如果滑动的距离为正数,表示向右,反之向左 if (distence >= windowWidth / 2 || (distence > 30 && time < 500)){ console.log('向右滑动成功'); //改变信号量 /*perv=1 idx=2 next=3 * --> * prev=0 inx=1 next=2 * * */ next = idx; idx = prev; prev--; if (prev < 0){ prev = 4; } //此时手指头已经移开了,接下来图片的运动靠的是过度 //只需要给需要移动的人添加过度 imageLis[idx].style.transition = 'all 0.3s ease 0s'; imageLis[next].style.transition = 'all 0.3s ease 0s'; //接下来就是移动了 imageLis[idx].style.webkitTransform = 'translateX(0px)'; imageLis[next].style.webkitTransform = 'translateX(' + windowWidth + 'px)'; } else if (distence < -windowWidth / 2 || (distence < -30 && time < 500)){ showNext(); console.log('向左滑动成功') } else{ console.log('滑动失败') //反回原位,三人都加过度 imageLis[idx].style.transition = 'all 0.3s ease 0s'; imageLis[prev].style.transition = 'all 0.3s ease 0s'; imageLis[next].style.transition = 'all 0.3s ease 0s'; //移动归位 changex(); } } function showNext() { /* * prev=1 idx=2 next=3; * --> * prev=2 idx=3 next=4 * */ prev=idx; idx=next; next++; if (next > 4){ next = 0; } //新的next看不到不用管怎么变化 imageLis[next].style.transition = 'none'; imageLis[next].style.webkitTransform = 'translateX('+ windowWidth + 'px)'; imageLis[idx].style.transition = 'all 0.3s ease 0s'; imageLis[prev].style.transition = 'all 0.3s ease 0s'; imageLis[idx].style.webkitTransform = 'translateX(0px)'; imageLis[prev].style.webkitTransform = 'translateX(' + -windowWidth + 'px)'; }