.banner{
width: 300%;
height: 100%;
transition: 0.5s;
position: absolute;
left: 0;
top: 0;
}
.banner div{
width: 33.33333%;
height: 100%;
float: left;
}
.banner div:nth-of-type(1){
background: lightseagreen;
}
.banner div:nth-of-type(2){
background: lightgoldenrodyellow;
}
.banner div:nth-of-type(3){
background: lightcoral;
}
var banner = document.querySelector(".banner");
var banXStart = 0;
var banXEnd = 0;
var banXFinal = 0;
var banIndex = 0;
banner.addEventListener("touchstart",function(evt){
one = evt.touches[0];
banXStart = one.pageX;
});
banner.addEventListener("touchmove",function(evt){
one = evt.touches[0];
});
banner.addEventListener("touchend",function(evt){
banXEnd = one.pageX;
banXFinal = banXEnd - banXStart;
if( banXFinal != 0 ){
if(banXFinal <= -30){
banIndex ++;
if(banIndex == 3){
banIndex = 2;
}
}
if(banXFinal >= 30){
banIndex --;
if(banIndex == -1){
banIndex = 0;
}
}
$(".banner").css("left",-(banIndex*scrWid)+"px");
}
banXStart = 0;
banXEnd = 0;
banXFinal = 0;
});