京东m站首页
```
window.onload=function(){
changeNavColor();
banner();
secondKell()
}
/*
*导航变色方法封装
* */
functionchangeNavColor(){
/*获取元素*/
varJD_header= document.getElementsByClassName('jd_header_box')[0];
varbanner= document.getElementsByClassName('jd_banner')[0];
/*banner高度*/
varbannerH=banner.offsetHeight;
/*监听滚动事件*/
varscrollH=0;
window.onscroll=function(){
/*求出滚动距离*/
scrollH= document.body.scrollTop;
/*判断*/
varopt=0
if(scrollH
opt=scrollH/bannerH*0.85;
}else{
opt=0.85;
}
JD_header.style.background='rgba(201, 21, 35, '+opt+')';
}
}
/*
* banner轮播图
* */
functionbanner(){
/*获取标签*/
varbanner= document.getElementsByClassName('jd_banner')[0];
varbannerW=banner.offsetWidth;
varimageBox=banner.getElementsByTagName('ul')[0];
varpointBox=banner.getElementsByTagName('ol')[0];
varpointLis=pointBox.getElementsByTagName('li');
/*设置过度效果*/
varaddTransition=function(){
imageBox.style.transition='all .2s ease';
/*兼容老版本的webkit内核*/
imageBox.style.webkitTransition='all .2s ease';
};
/*清除多度效果*/
varremoveTransition=function() {
imageBox.style.transition='none';
/*兼容老版本的webkit内核*/
imageBox.style.webkitTransition='none';
};
/*封装移动距离方法*/
varchengeTransitionX=function(x){
imageBox.style.transform='translate('+x+'px)';
imageBox.style.webkitTransform='translate('+x+'px)';
};
/*让图片滚动起老*/
varindex=1;
vartimer=null;
timer=setInterval(scrollImg,1000);
functionscrollImg(){
index++;
/*添加过度 让图片滚动起来*/
addTransition();
chengeTransitionX(-index*bannerW);
};
/*判断每一张图片过度结束后 临界值*/
imageBox.addEventListener('transitionEnd',function(){
if(index>=9) {
index=1;
}else if(index<=0){
index=8;
}
/*清除过度*/
removeTransition();
chengeTransitionX(-index*bannerW);
});
imageBox.addEventListener('webkitTransitionEnd',function(){
if(index>=9) {
index=1;
}else if(index<=0){
index=8;
}
/*清除过度*/
removeTransition();
chengeTransitionX(-index*bannerW);
setPoint();
});
/*piont动画*/
varsetPoint=function(){
/*清除所有li的className*/
for(vari=0;i
pointLis[i].className='';
}
/*让圆点的索引和图片的索引保持一致*/
varpointIndex=index;
if(index>=9){
pointIndex=0;
}else if(index<=0){
pointIndex=7;
}
/*让当前的被选中*/
pointLis[pointIndex].className='current';
}
/*监听滑动*/
varstartX=0,endX=0,distanceX=0;
imageBox.addEventListener('touchstart',function(e){
/*清除定时器*/
clearInterval(timer);
/*求出起始位置*/
startX=e.touches[0].clientX;
});
imageBox.addEventListener('touchmove',function(e){
/*阻止默认事件*/
e.preventDefault();
/*获取移动结束位置*/
endX=e.touches[0].clientX;
/*求出移动距离*/
distanceX=startX-endX;
/*清除过度动画*/
removeTransition();
/*改变位置*/
chengeTransitionX(-index*bannerW-distanceX);
});
imageBox.addEventListener('touchend',function(){
/*当滑动距离满足1/3宽度的时候 滑动一屏&&滑动状态下*/
if(Math.abs(distanceX)>=1/3*bannerW&&endX!=0){
if(distanceX>0){
index++;
}else{
index--;
}
}
/*添加过渡效果 改变位置*/
addTransition();
chengeTransitionX(-index*bannerW);
/*重新开启定时器*/
timer=setInterval(scrollImg,1000);
/*初始化*/
startX=0;
endX=0;
distanceX=0;
});
}
/*
*秒杀倒计时
* */
functionsecondKell(){
/*获取需要的标签*/
varsecTime= document.getElementsByClassName('sec_timer')[0];
varspans=secTime.getElementsByTagName('span');
/*倒计时*/
vartimer=null,time=8*60*60;
timer=setInterval(function(){
time--;
if(time<=0){
clearInterval(timer);
}
/*把事件转成时分秒*/
varh=Math.floor(time/(60*60));
varm=Math.floor(time%(60*60)/60);
vars=time%60;
/*赋值*/
spans[0].innerHTML=h>=10?Math.floor(h/10):0;
spans[1].innerHTML=h%10;
spans[3].innerHTML=m>=10?Math.floor(m/10):0;
spans[4].innerHTML=m%10
spans[6].innerHTML=s>=10?Math.floor(s/10):0;
spans[7].innerHTML=s%10;
},1000);
}
```
