移动端轮播

      
// 轮播
(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); }})() ;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

对酒丶当歌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值