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

Question

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);

//过渡结束

}

Answer 1

querySelector是documemt的属性，把newList打印看一下就知道不对了