为了账号安全,请及时绑定邮箱和手机立即绑定

Uncaught TypeError: Cannot read property 'style' of null at index.js:138

Uncaught TypeError: Cannot read property 'style' of null at index.js:138

qq_慕婉清2132665 2020-04-19 18:55:50
window.onload = function(){ banner(); backTime(); topnews();}/* 轮播图 */var banner = function(){ //获取到轮播相关的DOM元素 var banner = document.querySelector('.banner'); var imgBox = banner.querySelector('.imgBox'); var pointBox = banner.querySelector('.pointBox'); var lis = pointBox.querySelectorAll('li'); //定义初始变量 var index = 1; var bwidth = banner.offsetWidth; /* 开始图片轮播 */ var timer = setInterval(function(){ index++; imgBox.style.transition = 'all 0.5s'; imgBox.style.transform = 'translateX('+ -index*bwidth +'px)'; },1000); /* 图片切换过度之后 */ imgBox.addEventListener('transitionend',function(){ if(index>8){ index = 1; imgBox.style.transition = 'none'; imgBox.style.transform = 'translateX('+ -index*bwidth +'px)'; }else if(index<1){ index = 8; imgBox.style.transition = 'none'; imgBox.style.transform = 'translateX('+ -index*bwidth +'px)'; } /*圆点跟随运动*/ for(var i=0;i<lis.length;i++){ lis[i].classList.remove('now'); } lis[index-1].classList.add('now'); }); /*圆点点击*/ for(var i=0;i<lis.length;i++){ lis[i].setAttribute('ix',i); lis[i].addEventListener('click',function(){ var j =  this.getAttribute('ix'); index = parseInt(j)+1; //图片切换 imgBox.style.transition = 'none'; imgBox.style.transform = 'translateX('+ -index*bwidth +'px)'; //圆点变化 for(var i=0;i<lis.length;i++){ lis[i].classList.remove('now'); } this.classList.add('now'); }) } /*手指滑屏*/ var startX = 0;//初始触摸点横坐标 var distinctX = 0;//水平偏移距离 var translateX = 0;//图片一会要去的位置 var isMove = false;//是否滑动 imgBox.addEventListener('touchstart',function(e){ //停止自动轮播,等待滑屏轮播 clearInterval(timer); startX = e.touches[0].clientX; }); imgBox.addEventListener('touchmove',function(e){ isMove = true; var moveX = e.touches[0].clientX; distinctX = moveX - startX; translateX = -index*bwidth + distinctX; //图片跟随手指开始动了 imgBox.style.transition='none'; imgBox.style.transform='translateX('+ translateX +'px)'; }); imgBox.addEventListener('touchend',function(e){ if(isMove){ if(Math.abs(distinctX) < bwidth/3){ imgBox.style.transition='all 0.5s'; imgBox.style.transform='translateX('+ -index*bwidth +'px)'; }else{ //向右滑 if(distinctX>0){ index--; }else(distinctX<0) index++; imgBox.style.transition='all 0.5s'; imgBox.style.transform='translateX('+ -index*bwidth +'px)'; } //滑动结束,图片自动轮播 clearInterval(timer); timer = setInterval(function(){ index++; imgBox.style.transition = 'all 5s'; imgBox.style.transform = 'translateX('+ -index*bwidth +'px)'; },1000); //数据重置 startX = 0; distinceX = 0; isMove = false; } });}/*倒计时*/var backTime = function(){ //获取相关DOM元素 var time = document.querySelector('.time'); var spans = time.querySelectorAll('span'); //倒计时时间是24小时,24小时转换为秒 var t = 24*60*60; var timer = setInterval(function(){ t--; var h = Math.floor(t/3600); var m = Math.floor(t%3600/60); var s = t%60; /*console.log(h + ',' + m+ ','+s);*/ //把时间显示在span元素上 spans[0].innerText = h>9 ? h : '0'+h; spans[2].innerText = m>9 ? m : '0'+m; spans[4].innerText = s>9 ? s : '0'+s; //如果t小于0 if(t<=0) { clearInterval(timer);//倒计时结束,函数不再执行 } },1000);}//头条信息函数var topnews = function(){ //获取dom元素 var news = document.querySelector('.news'); var newlist = news.querySelector('.newslist'); var index =0; var newsHeight = news.offsetHeight; var timer = setInterval(function(){ index++; newlist.style.transition = 'all 0.5s'; newlist.style.transform = 'translateY('+ -index*newsHeight +'px)'; },2000); //过渡结束 }
查看完整描述

目前暂无任何回答

  • 0 回答
  • 0 关注
  • 838 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信