移動端輪播的完善

封裝transform.js

2個引數獲取 transform 的值

3個 設定

/*

2個引數獲取 transform 的值
3個 設定
*/function
csstransform
(obj,attr,val);
}if(arguments.length === 3)
}obj.style.webkittransform = obj.style.transform = strval;
}elseelseelse 
}return value;}}

var slide = document.queryselector('.banner'),

oul = document.queryselector('.banner ul'),
tab = document.queryselectorall('.dot span'),
startfinger = 0,
startx = 0,
translatex = 0,
num = 0;
oul.style.width = oul.children.length+'00%';
tab[0].classname = 'on';
slide.addeventlistener('touchstart',function
(e) );
slide.addeventlistener('touchmove',function
(e) );
slide.addeventlistener('touchend',function
(e) 
tab[num].classname = 'on';
})

var slide = document.queryselector('.banner'),

oul = document.queryselector('.banner ul'),
tab = document.queryselectorall('.dot span'),
startfinger = 0,
startx = 0,
width = slide.offsetwidth;
num = 0;
csstransform(oul,'translatex',0);
oul.innerhtml += oul.innerhtml;
var length = oul.
children.
length;
oul.
style.width = length+'00%';
tab[0].classname = 'on';
slide.addeventlistener('touchstart',function
(e) else
if( num === length-1)
startx = csstransform(oul,'translatex');
});slide.addeventlistener('touchmove',function
(e) );
slide.addeventlistener('touchend',function
(e) 
tab[num%tab.length].classname = 'on';
})

var slide = document.queryselector('.banner'),

oul = document.queryselector('.banner ul'),
tab = document.queryselectorall('.dot span'),
startfinger = 0,
startx = 0,
width = slide.offsetwidth,
num = 0,
timer = null,
timeout = null,
distance = 0;//兩指距離
// 初始
csstransform(oul,'translatex',0);
oul.innerhtml += oul.innerhtml;
var length = oul.
children.
length;
oul.
style.width = length+'00%';
tab[0].classname = 'on';
// 繫結
slide.addeventlistener('touchstart',function
(e) else
if( num === length-1)
startx = csstransform(oul,'translatex');
});slide.addeventlistener('touchmove',function
(e) );
slide.addeventlistener('touchend',function
(e) else
}change();
timeout = settimeout(auto,500);
})auto();
// 自動
豎直方向移動距離大於水平方向==> 不移動
// 第一次移動 看是水平的還是豎直方向的

// 轉向不移動 新增開關
js

var slide = document.queryselector('.banner'),

oul = document.queryselector('.banner ul'),
tab = document.queryselectorall('.dot span'),
startfinger = 0,
startx = 0,
width = slide.offsetwidth,
num = 0,
timer = null,
onoff = true,
first = true;
// 初始
csstransform(oul,'translatex',0);
oul.innerhtml += oul.innerhtml;
var length = oul.children.length;
oul.style.width = length+'00%';
tab[0].classname = 'on';
// 繫結
slide.addeventlistener('touchstart',function
(e) else
if( num === length-1)
startx = csstransform(oul,'translatex');
onoff = true;
first = true;
});slide.addeventlistener('touchmove',function
(e) 
var nowfinger = e.changedtouches[0],
disy = nowfinger.pagey - startfinger.pagey,
disx = nowfinger.pagex - startfinger.pagex;
console.log(disx,disy);
// 第一次移動 看是水平的還是豎直方向的
// 轉向不移動 新增開關
//豎直方向移動距離大於水平方向==> 不移動
if(first)
}if(onoff)
});slide.addeventlistener('touchend',function
(e) )
auto();
// 自動
function
auto
(),500);
});}else
},1000);
}function
change
(callback)
tab[num%tab.length].classname = 'on';
callback&&callback();
}
 
移動端輪播效果
一 涉及知識點 1.touchstart touchmove touchend 2.觸控引數，事件e e.touches 螢幕中所有手勢列表 e.touches 0 獲取第乙個手勢,是乙個json物件 屬性有pagex,pagey.用於touchstart，touchmove事件中 e.change...
原生JS實現移動端的輪播效果
首先 我們想實現的效果是在手指按下拖動的時候能夠跟隨移動 無動畫效果 然後鬆開手指後判斷移動的位置 和某乙個值進行比較 當移動位置小於1 3的時候 抬起手指的回到原位 此時也有動畫效果 具體 如下 布局就是簡單的長列形式 讓最外層的banner固定寬多餘的隱藏 ul的寬度這足夠大 通過移動ul的le...
移動端滑動輪播，原生JS
因為公司需要自定義兩個輪播圖聯動，又不想引入第三方庫，所以自己研究了下。下面只是乙個簡單的輪播圖，由此再拓展一下即可實現兩個輪播圖聯動。doctype html html lang en head meta charset utf 8 meta name viewport content width...