<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="rem插件.js"></script>
<style>
*{
margin:0;
padding:0;
}
html{
font-size:100px;
overflow-x:hidden;
}
body{
font-size:14px;
}
div,ul,li,img{
margin:0;
padding:0;
}
.box{
width:100%;
height:1.17rem;
}
.clearfix:after{
content:"";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.content{
width:500%;
height:1.17rem;
}
.content div{
width:20%;
height:1.17rem;
float:left;
}
.content div img{
width:100%;
height:1.17rem;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div><img src="img/05.jpg" /></div>
<div><img src="img/01.jpg" /></div>
<div><img src="img/04.jpg" /></div>
<div><img src="img/05.jpg" /></div>
<div><img src="img/01.jpg" /></div>
</div>
</div>
</body>
</html>
<script>
var t=null,index=1,startind=0,moveind=0,distance=0;
var box=document.querySelector(".box");
var wid=box.offsetWidth;
var content=document.querySelector(".content");
content.style.transform="translateX(-"+(wid)+"px)";
t=setInterval(function(){
index++;
addtransition()
content.style.transform="translateX(-"+(wid*index)+"px)";
},2000)
//过度函数
function addtransition(){
content.style.transition="all .3s linear";
content.style.webkitTransition="all .3s linear";
}
function removetransition(){
content.style.transition="none";
content.style.webkitTransition="none";
}
content.addEventListener("transitionend",function(){
if(index>3){
index=1;
removetransition()
content.style.transform="translateX(-"+(wid*index)+"px)";
}
else{
if(index<1){
index=3;
removetransition()
content.style.transform="translateX(-"+(wid*index)+"px)";
}
}
})
content.addEventListener("touchstart",function(e){
clearInterval(t);
startind=e.touches[0].clientX;
})
content.addEventListener("touchmove",function(e){
moveind=e.touches[0].clientX;
distance=moveind-startind;
content.style.transform="translateX(-"+(wid*index-distance)+"px)";
})
content.addEventListener("touchend",function(e){
if(Math.abs(distance)<wid/3){
content.style.transform="translateX(-"+(wid*index)+"px)";
addtransition()
}
else{
if(distance<0){
// 左移
index++;
content.style.transform="translateX(-"+(wid*index)+"px)";
addtransition();
}
else{
index--;
content.style.transform="translateX(-"+(wid*index)+"px)";
addtransition();
}
}
t=setInterval(function(){
index++;
addtransition()
content.style.transform="translateX(-"+(wid*index)+"px)";
},2000)
startind=0;
moveind=0;
distance=0;
})
</script>
