html部分(请在chrome 的手机模式下测试)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/swiper.css" />
</head>
<body>
<section class="container">
<section class="bg">
</section>
<section class="swiper">
<ul>
<li>
<a href="http://baidu.com">
</a>
</li>
<li>
<a href="http://baidu.com">
</a>
</li>
<li>
<a href="http://baidu.com">
</a>
</li>
<li>
<a href="http://baidu.com">
</a>
</li>
<li>
<a href="http://baidu.com">
</a>
</li>
<li>
<a href="http://baidu.com">
</a>
</li>
</ul>
</section>
</section>
<script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
less部分
@charset "utf-8";
*{margin: 0;padding: 0;}
li{list-style: none;}
html,body{max-width: 640px;margin: 0 auto;}
.container{width: 100vw;height: 100vh;background: #f5f5f5;position: relative;
.bg{position: absolute;top: 0;left: 0;right: 0;bottom: 0;
img{width: 100%;height: 100%;display: block;filter: blur(10px);}
}
.swiper{width: 100vw;height: 60vh;position: absolute;top: 20vh;overflow: hidden;
ul{width: 500%;display: flex;flex-direction: row;flex-wrap: nowrap;
li{width: 100%;height: 60vh;
img{display: block;height: 60vh;margin: 0 auto;}
}
}
}
}
javascript部分
var swiper = function(){
var oSwiper = document.querySelector('.swiper');
var oUl = oSwiper.querySelector('ul');
var oLi = oUl.querySelectorAll('li');
var liLength = oLi.length;
var startX = '0'; //手指X位置初始化,初始化ul的translateX的位置
var startPoint = '0'; //初始化手指对象
var num = 0; //初始化显示第几张
var oW = oSwiper.offsetWidth;
var oBg = document.getElementsByClassName('bg')[0];
var oImg = oBg.getElementsByTagName('img')[0];
init();
// 当前X位置 = 原先X值 + (移动量)手指
oSwiper.addEventListener('touchstart',function(e){
// oUl.style.transition = '';
// console.log(e);
startPoint = e.changedTouches[0];
oUl.style.transition = '';
startX = cssTransform(oUl,'translateX');
// console.log(startX);
},false)
oSwiper.addEventListener('touchmove',function(e){
var nowPoint = e.changedTouches[0];
var disX = nowPoint.clientX - startPoint.clientX;
var translateX = parseInt(startX) + parseInt(disX);
cssTransform(oUl,'translateX',translateX);
// console.log(translateX);
},false)
oSwiper.addEventListener('touchend',function(e){
var endPoint = e.changedTouches[0];
var l = cssTransform(oUl,'translateX');
num = Math.round(-l/oW);
if(num < 0){
num = 0;
autoPlay();
}else if(num >= liLength){
num = liLength-1;
autoPlay();
}else{
autoPlay();
}
autoBg();
})
function autoPlay(){
oUl.style.transition = '0.5s';
cssTransform(oUl,'translateX',-num*oW);
}
function autoBg(){
var z = oLi[num].getElementsByTagName('img')[0].src;
oImg.transition = '0.5s';
oImg.src = z;
console.log(z);
}
// 初始化
function init(){
oUl.style.width = liLength+'00%';
cssTransform(oUl,'translateX','0');
cssTransform(oUl,'translateY','0');
}
// 封装一个transform属性
function cssTransform(obj,attr,val){
obj.transform = obj.transform || {};
if(arguments.length === 3){
obj.transform[attr] = val;
var strVal = '';
for(var key in obj.transform){
// 这里的key就是 transform的属性 translateX
// 这个str就是 translateX
strVal += key+'('+obj.transform[key]+'px)';
}
obj.style.transform = strVal;
}else if(arguments.length === 2){
val = obj.transform[attr];
if(typeof val === 'undefined'){
val = 0;
}
// console.log(val)
return val;
}
}
}
swiper();
下面是我用的图片
01.jpg
02.jpg
03.jpg
04.jpg
05.jpg
06.jpg
