淘先锋技术网

首页 1 2 3 4 5 6 7

原生js实现无缝滚动轮播图（移动端）-自动轮播

想不依赖任何插件和库，就用原生js实现移动端自动轮播，发现网上的都不尽如人意，干脆自己写一个，代码有部分参考，废话少说，上代码。

  1. head部分，没什么好说的：
<meta charset="utf-8">
        <meta name="copyright" content="">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>原生js实现无缝滚动轮播图</title>

2.html部分，引用图片是通过http://lorempixel.com/400/200/，这是个可以随机生成图片的网站，很好用。

<div class="banner" id="banner">
    <div class="slider_list">

        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://lorempixel.com/400/200/?image=0" title="">
            </a>
        </div>
        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://lorempixel.com/400/200/?image=1" title="">
            </a>
        </div>
        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://lorempixel.com/400/200/?image=2" title="">
            </a>
        </div>
        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://lorempixel.com/400/200/?image=3" title="">
            </a>
        </div>
        <div class="swiper-slide">
            <a href="javascript:;">
                <img src="http://lorempixel.com/400/200/?image=4" title="">
            </a>
        </div>

    </div>
    <ol class="pagination"></ol>
</div>

3.css部分：

* {
    margin: ;
    padding: ;
}
body{
    margin:  auto;
    max-width: px;
}
ul,
ol {
    list-style: none;
}
.banner {
    position: relative;
    background-color: #FFFFFF;
    margin-top: px;
    overflow: hidden;
}
.banner:after {
    content: '';
    display: block;
    height: ;
    visibility: hidden;
    line-height: ;
    clear: both;
}
.swiper-slide {
    -webkit-flex-shrink: ;
    -ms-flex-negative: ;
    flex-shrink: ;
    position: relative;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
}
.banner .slider_list .swiper-slide {
    float: left;
    flex-shrink: ;
    -webkit-flex-shrink: ;
    -ms-flex-negative: ;
    flex-shrink: ;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
}
.banner .slider_list a {
    display: block;
}
.banner .slider_list img {
    display: block;
    width: %;
}
.banner .pagination {
    position: absolute;
    bottom: px;
    left: ;
    right: ;
    text-align: center;
}
.banner .pagination li {
    display: inline-block;
    width: px;
    height: px;
    margin:  px;
    border-radius: px;
    background: #e9e9e9;
    box-shadow: inset  px px rgba(, , , );
    -webkit-box-shadow: inset  px px rgba(, , , );
    -moz-box-shadow: inset  px px rgba(, , , );
}
.banner .pagination li.active {
    background: #fc6b00
}

4.核心内容，js部分

document.addEventListener('DOMContentLoaded', function() {
    var slider_content = document.querySelector('#banner .slider_list');
    var slider_items = slider_content.children;
    var num = slider_items.length;
    slider_content.style.width = (num + ) *  + '%';
    slider_content.style.transform = 'translateX(-' +  / (num + ) + '%)';
    slider_content.appendChild(slider_items[].cloneNode(true));
    slider_content.insertBefore(slider_items[num - ].cloneNode(true), slider_items[]);
    var pagination = document.querySelector('#banner ol');
    for(var i = ; i < num; i++) {
        var creatLi = document.createElement('li');
        pagination.appendChild(creatLi);
    }
    for(var i = ; i < num + ; i++) {
        slider_items[i].style.width =  / (num + ) + '%';
    }
    var pagination_items = pagination.children;
    pagination_items[].classList.add('active');
    var iNow = ;
    var x = -iNow * slider_items[].offsetWidth;
    //在这里设置一个开关,是css运动结束后解锁
    var bReady = true;
    slider_content.addEventListener('touchstart', function(ev) {
        clearInterval(timer);
        if(bReady == false) {
            return;
        }
        bReady = false;
        slider_content.style.transition = 'none';
        var disX = ev.targetTouches[].pageX - x;
        var downX = ev.targetTouches[].pageX;

        function fnMove(ev) {
            x = ev.targetTouches[].pageX - disX;
            slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
        }

        function fnEnd(ev) {
            var upX = ev.changedTouches[].pageX;
            //判断是否移动距离大于50
            if(Math.abs(upX - downX) > ) {
                //左边移动
                if(upX - downX < ) {
                    iNow++;
                    if(iNow == slider_items.length) {
                        iNow = slider_items.length - ;
                    }
                    if(iNow == num + ) {
                        pagination_items[num - ].classList.remove('active');
                        pagination_items[].classList.add('active');
                    } else {
                        pagination_items[iNow - ].previousElementSibling.classList.remove('active');
                        pagination_items[iNow - ].classList.add('active');
                    }

                } else {
                    //右边移动
                    iNow--;
                    if(iNow == -) {
                        iNow = ;
                    }
                    if(iNow == ) {
                        pagination_items[].classList.remove('active');
                        pagination_items[num - ].classList.add('active');
                    } else {
                        pagination_items[iNow - ].nextElementSibling.classList.remove('active');
                        pagination_items[iNow - ].classList.add('active');
                    }
                }
            }
            //储存此时ul的位置
            x = -iNow * slider_items[].offsetWidth;
            slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
            slider_content.style.transition = '500ms all ease';

            //监听li 当移动到两端的li时  瞬间移回
            function tEnd() {
                if(iNow == num + ) {
                    iNow = ;
                }
                if(iNow == ) {
                    iNow = num;
                }
                slider_content.style.transition = 'none'
                x = -iNow * slider_items[].offsetWidth;
                slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
                bReady = true;
            }
            slider_content.addEventListener('transitionend', tEnd, false);
            //释放内存
            document.removeEventListener('touchend', fnEnd, false);
            document.removeEventListener('touchmove', fnMove, false);
        }

        document.addEventListener('touchmove', fnMove, false);
        document.addEventListener('touchend', fnEnd, false);
        //阻止默认事件
        ev.preventDefault();
    }, false);

    //自动轮播
    var timer=setInterval(function() {
        iNow++;
        if(iNow == num + ) {
            x = - * slider_items[].offsetWidth;
            pagination_items[num - ].classList.remove('active');
            pagination_items[].classList.add('active');
            slider_content.style.transition = 'none';
            slider_content.style.transform = 'translate3d(' +  * slider_items[].offsetWidth + 'px,0,0)';
            setTimeout(function() {
                slider_content.style.transition = '500ms all ease';
                slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
            })
            bReady = true;
            iNow = ;
        } else {
            slider_content.style.transition = 'none';
            x = -iNow * slider_items[].offsetWidth;
            slider_content.style.transform = 'translate3d(' + x + 'px,0,0)';
            slider_content.style.transition = '500ms all ease';
            bReady = true;
            pagination_items[iNow - ].previousElementSibling.classList.remove('active');
            pagination_items[iNow - ].classList.add('active');
        }
    }, )
}, false);

轮播的数量可以自定义，就在html部分增减就行，js会自动获取数量，并添加底部小圆点。