移动端轮播

      

// 轮播
(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) ; }})() ;