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);
//过渡结束
}
慕梦前来