基于js的无缝轮播图（ 移动端手指滑动操作）（扩展：简单的倒计时）

基于纯js+移动web开发+手指滚动。。。

html代码如下：

<div class="jd_banner">
    <ul class="clearfix">
        <li><a href="#"><img src="image/8.jpg" alt="">a>li>
        <li><a href="#"><img src="image/1.jpg" alt="">a>li>
        <li><a href="#"><img src="image/2.jpg" alt="">a>li>
        <li><a href="#"><img src="image/3.jpg" alt="">a>li>
        <li><a href="#"><img src="image/4.jpg" alt="">a>li>
        <li><a href="#"><img src="image/5.jpg" alt="">a>li>
        <li><a href="#"><img src="image/6.jpg" alt="">a>li>
        <li><a href="#"><img src="image/7.jpg" alt="">a>li>
        <li><a href="#"><img src="image/8.jpg" alt="">a>li>
        <li><a href="#"><img src="image/1.jpg" alt="">a>li>
    ul>
    <ul>
        <li class="now">li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
    ul>
div>

css代码如下：

/*轮播图*/
.jd_banner{
    width:100%;
    position:relative;
    overflow: hidden;
}
.jd_banner>ul:first-child{
    width:1000%;    //这里轮播图中放了10张图片，所以是1000%
    -webkit-transform:translateX(-10%);   //实现无缝（默认放第“2”张）
    transform:translateX(-10%);
}
.jd_banner>ul:first-child>li{
    width:10%;   //每张图片占满整个屏幕，相对于1000%的100%
    float:left;
}
.jd_banner>ul:first-child>li>a{
    width:100%;
    display:block;
    /*font-size:0;*/
}
.jd_banner>ul:first-child>li>a>img{
    width:100%;
    display:block;  
    /*vertical-align: center;*/  //font-size:0/display:block/vertical-align:center起到的效果是一样的
}
.jd_banner>ul:last-child{
    width:118px;
    height:6px;
    position:absolute;
    bottom:6px;
    left:50%;
    margin-left:-59px;
}
.jd_banner>ul:last-child>li{
    width:6px;
    height:6px;
    border-radius:3px;
    float:left;
    border:1px solid #fff;
    margin-left:10px;
}
.jd_banner>ul:last-child>.now{
    background:#fff;
}
.jd_banner>ul:last-child>li:nth-child(1){
    margin:0;
}

js代码如下：

window.onload = function(){
    banner();
}

var banner = function(){
    // 1、无缝滚动&无缝滑动（定时器、过渡、位移）
    // 2、点盒子对应改变（改变当前样式）
    // 3、可以滑动（touch事件）
    // // 4、当滑动距离不够的时候吸附回去（过渡、位移）
    // 5、当超过一定距离的时候跳转，上一张或者下一张（判断方向、过渡、位移）
    // 获取需要操作的dom元素
    // 大容器
    var banner = document.querySelector(".jd_banner");
    // 轮播图宽度
    var width = banner.offsetWidth;
    // 图片容器
    var imagebox = banner.querySelector("ul:first-child");
    // 点容器
    var pointbox = banner.querySelector("ul:last-child");
    //所有的点
    // var point = pointbox.childNodes;
    var points = pointbox.querySelectorAll('li');

    // 1、无缝滚动&无缝滑动（定时器、过渡、位移）setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。   
    // 提取公用方法
    var addTransition = function(){
            // 增加过渡
        imagebox.style.transition = 'all 0.2s';
        imagebox.style.webkitTransition = "all 0.2s";  //兼容
    }
    var removeTransition = function(){
        // 清除过渡
        imagebox.style.transition = 'none';
        imagebox.style.webkitTransition = "none";  //兼容
    }
    var setTranlateX = function(translatex){
        // 设置位移
        imagebox.style.transform = "translateX("+translatex+"px)";
        imagebox.style.webkitTramsform = "translateX("+translatex+"px)";
    }
    var index = 1;
    var timer = setInterval(function(){
        index ++;
        // 增加过渡
        addTransition();
        //位移
        setTranlateX(-index*width);
    },3000);
    // 怎么监听过渡截止的时间 过渡结束S事件
    imagebox.addEventListener('transitionend',function(){
        // 无缝滚动
        if(index >= 9){
            // 瞬间定位到第一张
            index =1;
            // 先清除过渡，然后在根据index定位
            removeTransition();
            setTranlateX(-index*width);
        }
        // 无缝滑动（定时器、过渡、位移）
        else if(index<=0){
            index = 8;
            removeTransition();
            setTranlateX(-index*width);
        }
        setpoint();
    })

    // 点盒子的样式改变
    var setpoint = function(){
        // index范围1-8
        // 去除所有的样式
        for(var i =0;i"now");
        }
        // 给对应的加上
        points[index-1].classList.add("now")
    }

    var startX = 0;  //记录开始的X的坐标
    var distanceX = 0;   //记录坐标轴的改变
    // 为了严谨
    var ismove = false;
    // 可以滑动（touch事件  监听触摸点坐标的改变距离 位移）
    imagebox.addEventListener("touchstart",function(e){
        // 在做滑动之前清除定时器
        clearInterval(timer);
        //记录开始的位移
        startX = e.touches[0].clientX;
        // console.log(startX);
    });

    imagebox.addEventListener("touchmove",function(e){
        var moveX =  e.touches[0].clientX;
        distanceX = moveX - startX;
        //当distanceX大于0的时候向右滑动，小于0的时候向左滑动
        // 基于当前的位置来计算定位，而不是用0,0
        var translateX = -index*width +distanceX;
        // // 即时的跟着手指做滑动，因此就不需过渡了
        removeTransition();
        // // 做定位
        setTranlateX(translateX);
        ismove = true;
    });

    // 手指离开屏幕的时候触发
    imagebox.addEventListener("touchend",function(e){
        console.log(distanceX);
        // 滑动事件结束以后来判断当前滑动距离
        // 有一个范围，如果滑动的范围大于三分之一则切换图片，如果小于三分之一则定位回去
        if(ismove){
            if(Math.abs(distanceX)3){
                // 移动距离不够的时候（过渡效果、位移）
                addTransition();
                setTranlateX(-index*width);
            }else{
                //滑动距离够了的时候（切换上一张、下一张）
                if(distanceX>0){
                    // 向右滑，切换到上一张
                    index--;
                }else{
                    // 向左滑
                    index++;
                }
                addTransition();
                setTranlateX(-index*width);
            }
        }
        // 为了严谨，保证只加一次定时器
        clearInterval(timer);
        // 手指离开的时候要加上定时器
        timer = setInterval(function(){
            index ++;
            // 增加过渡
            addTransition();
            //位移
            setTranlateX(-index*width);
        },2000);
        //重置参数，表面滑动结束后对效果产生影响
        startX = 0;
        distanceX = 0;
        ismove = false;
    });

}

倒计时实现：

html代码大致如下：

<main class="jd_product">
        
    <section class="product_box jd_sk">
        
        <div class="product_tit no_border">
            <div class="f_left m_l10">
                <div class="sk_time m_l10">
                    <span>0span>
                    <span>0span>
                    <span>:span>
                    <span>0span>
                    <span>0span>
                    <span>:span>
                    <span>0span>
                    <span>0span>
                div>
            div>
            <div class="f_right m_r10"><a href="#">更多>a>div>
        div>
        
    section>      
main>

js代码如下：

var downtime = function(){
    //模拟倒计时的时间，假设是11 个小时
    //利用计时器 1秒一次重新展示时间
    var time = 60*60*11;
    var skTime = document.querySelector(".sk_time");
    var spans = skTime.querySelectorAll("span");
    var timer = setInterval(function(){
        time--;
        //时针
        var h = Math.floor(time/3600);
        //分针
        var m = Math.floor(time%3600/60);
        //秒针
        var s = time%60;
        // 设置时间
        spans[0].innerHTML = Math.floor(h/10);
        spans[1].innerHTML = h%10;

        spans[3].innerHTML = Math.floor(m/10);
        spans[4].innerHTML = m%10;

        spans[6].innerHTML = Math.floor(s/10);
        spans[7].innerHTML = s%10;

        if(time <=0){
            clearInterval(timer)
        }

    },1000)
}