jdM站首页

window.onload = function (){
    changeNavColor ();//导航滚动变色
    banner();//轮播图方法封装
    secondKell ()//倒计时秒杀
}

导航变色方法封装

function changeNavColor (){
    /*获取元素*/
    var JD_header = document.getElementsByClassName('jd_header_box')[0];
    var banner = document.getElementsByClassName('jd_banner')[0];
    /*banner高度*/
    var bannerH = banner.offsetHeight;
    /*监听滚动事件*/
    var scrollH = 0;
    window.onscroll = function (){
        /*求出滚动距离*/
        scrollH = document.body.scrollTop;
        /*判断*/
        var opt = 0
         if(scrollH < bannerH){
             opt = scrollH / bannerH * 0.85;
         }else {
             opt = 0.85;
         }
        JD_header.style.background = 'rgba(201, 21, 35, '+ opt +')';
    }
}

banner轮播图方法封装

function banner (){
    /*获取标签*/
    var banner = document.getElementsByClassName('jd_banner')[0];
    var bannerW = banner.offsetWidth;
    var imageBox = banner.getElementsByTagName('ul')[0];
    var pointBox = banner.getElementsByTagName('ol')[0];
    var pointLis = pointBox.getElementsByTagName('li');
    /*设置过度效果*/
    var addTransition = function (){
        imageBox.style.transition = 'all .2s ease';
        /*兼容老版本的webkit内核*/
        imageBox.style.webkitTransition = 'all .2s ease';
    };
    /*清除多度效果*/
    var removeTransition = function() {
        imageBox.style.transition = 'none';
        /*兼容老版本的webkit内核*/
        imageBox.style.webkitTransition = 'none';
    };
    /*封装移动距离方法*/
    var chengeTransitionX = function(x){
        imageBox.style.transform = 'translate(' + x +'px)';
        imageBox.style.webkitTransform = 'translate(' + x +'px)';
    };
    /*让图片滚动起老*/
    var index = 1;
    var timer = null;
    timer = setInterval(scrollImg, 1000);
       function scrollImg (){
           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 动画*/
    var setPoint = function(){
        /*清除所有li的className*/
        for(var i = 0; i < pointLis.length; i++){
            pointLis[i].className = '';
        }
        /* 让圆点的索引和图片的索引保持一致*/
        var pointIndex = index;
        if (index >=9 ){
            pointIndex = 0;
        }else if(index <=0){
            pointIndex = 7;
        }
        /*让当前的被选中*/
        pointLis[pointIndex].className = 'current';
    }
    /*监听滑动*/
    var startX = 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;
    });
}

倒计时秒杀方法

function secondKell() {
    /*获取需要的标签*/
    var secTime = document.getElementsByClassName('sec_timer')[0];
    var spans = secTime.getElementsByTagName('span');
    /*倒计时*/
    var timer = null, time = 8 * 60 * 60;
    timer = setInterval(function () {
        time--;
        if (time <= 0) {
            clearInterval(timer);
        }
        /*把事件转成时分秒*/
        var h = Math.floor(time / (60 * 60));
        var m = Math.floor(time % (60 * 60) / 60);
        var s = 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);
}