1. 程式人生 > >移動端輪播

移動端輪播

      
// 輪播
(function () {
    var Banner =document.querySelector(".Banner");  //輪播大圖 盒子
var B_ul =document.querySelector(".Banner .B-img ul");   //輪播 圖片UL
B_ul.innerHTML+=B_ul.innerHTML;    //為ul裡的li在新增一輪
var B_list =B_ul.querySelectorAll('li'); //獲取li; 
var B_dir =document.querySelectorAll(".Banner .B-dir ul li");   //輪播焦點
  var startPoint; //定義一個初始觸發;   
  var strat;// 初始位置; 充當位移值
  var transform=0;   //存貯移動位置
  var mun=0;  //判斷下標;
  var Wl=0;  //輪播寬度;
B_ul.style.width=B_list.length+"00%";Banner.addEventListener("touchstart",function (e) { startPoint =e.changedTouches[0].pageX;Wl=-this.offsetWidth;if (mun===0) {mun=B_dir.length
;} if (mun==B_list.length-1) {mun=B_dir.length-1;} B_ul.style.transform="translateX("+mun*Wl+"px)";B_ul.style.transition="";start =mun*Wl;});Banner.addEventListener('touchmove',function (e) { var nowPoint=e.changedTouches[0].pageX;var mix =nowPoint-startPoint;transform=mix+start;
console.log(start);B_ul.style.transform="translateX("+transform+"px)"});Banner.addEventListener('touchend',function (e) { mun =Math.round(-transform/Banner.offsetWidth);Wl=-Banner.offsetWidth;transform=mun*Wl;B_ul.style.transition="0.7s";B_ul.style.transform="translateX("+mun*Wl+"px)";for (var i=0; i<B_dir.length; i++) { B_dir[i].className="";} B_dir[mun%B_dir.length].className ="on";autoPlay() }) autoPlay() function autoPlay() { timer=setInterval(function () { setTimeout(function () { mun++;B_ul.style.transition="0.7s";B_ul.style.transform="translateX("+-mun*Banner.offsetWidth+"px)";for (var i=0; i<B_dir.length; i++){ B_dir[i].className="";} B_dir[mun%B_dir.length].className="on";},50);if (mun ==B_list.length-1){ mun =B_dir.length-1;B_ul.style.transition="";B_ul.style.transform="translateX("+-mun*Banner.offsetWidth+"px)";} },3000);}})() ;