移动端-滑动式卡片

CSS

.carousel{width:100%;height:200px;padding-bottom:50px}
.carousel-content{width:100%;height:100%;overflow:hidden}
.carousel-card-list{display:block;height:100%;transition:transform 0.8s;margin:0;padding:0;font-size:0}
.carousel-card{display:inline-block;height:100%;list-style:none;margin:0}
.carousel-indicators{margin-bottom:-50px;line-height:50px;font-size:0;text-align:center}
.indicator{display:inline-block;width:10px;height:10px;border-radius:50%;background-color:#ddd;margin:0 10px;transition:background-color 0.8s}
.indicator.active{background-color:#555}
li:nth-child(n){background-color:#eee}
li:nth-child(2n){background-color:#ddd}

HTML

        <div class="carousel">
            <div class="carousel-content">
                <ul class="carousel-card-list">
                    <li class="carousel-card"></li>
                    <li class="carousel-card"></li>
                    <li class="carousel-card"></li>
                </ul>
            </div>
            <div class="carousel-indicators">
                <span class="indicator active"></span>
                <span class="indicator"></span>
                <span class="indicator"></span>
            </div>
        </div>
        <br />
        <div class="carousel" style="width: 200px;">
            <div class="carousel-content">
                <ul class="carousel-card-list">
                    <li class="carousel-card"></li>
                    <li class="carousel-card"></li>
                    <li class="carousel-card"></li>
                </ul>
            </div>
            <div class="carousel-indicators">
                <span class="indicator active"></span>
                <span class="indicator"></span>
                <span class="indicator"></span>
            </div>
        </div>

JavaScript

            var oCarousel = document.querySelectorAll('.carousel');
            for(var i = 0, l = oCarousel.length; i < l; i++) {;
                (function(i) {
                    /*设置容器的width*/
                    var oCcarousel_card_list = oCarousel[i].querySelector('.carousel-card-list');
                    var oCcarousel_cards = oCcarousel_card_list.querySelectorAll('.carousel-card');
                    oCcarousel_card_list.style.width = oCcarousel_cards.length * 100 + '%';
                    setTransform(oCcarousel_card_list, 0);
                    for(var ii = 0, ll = oCcarousel_cards.length; ii < ll; ii++) {
                        oCcarousel_cards[ii].style.width = (1 / ll) * 100 + '%';
                    }
                    /*绑定事件*/
                    var index = 0;
                    var startX = 0;
                    var distanceX = 0;
                    var moveX = 0;
                    var translateX = 0;
                    oCcarousel_card_list.addEventListener('touchstart', function(e) {
                        startX = e.changedTouches[0].clientX;
                        translateX = getTranslateX(oCcarousel_card_list);
                    });
                    /*------------------------------*/

                    oCcarousel_card_list.addEventListener('touchmove', function(e) {
                        moveX = e.changedTouches[0].clientX;
                        distanceX = moveX - startX;
                        var resault = translateX + distanceX;
                        setTransform(oCcarousel_card_list, resault);
                    });
                    /*------------------------------*/
                    oCcarousel_card_list.addEventListener('touchend', function(e) {
                        var width = oCcarousel_card_list.parentNode.clientWidth;
                        moveX = e.changedTouches[0].clientX;
                        distanceX = moveX - startX;
                        var oldIndex = index;
                        if(distanceX != 0 && Math.abs(distanceX) > width / 4) {
                            if(distanceX > 0) { //右滑
                                if(index < 0) {
                                    index++;
                                }

                            } else { //左滑
                                if(index - 1 > -oCcarousel_card_list.querySelectorAll('.carousel-card').length) {
                                    index--;
                                }
                            }

                        }
                        setTransform(oCcarousel_card_list, index * width);
                        if(index != oldIndex) {
                            var oIndicator = oCarousel[i].querySelectorAll('.indicator');
                            if(oIndicator != null) {
                                oCarousel[i].querySelector('.indicator.active').className = 'indicator';
                                oIndicator[Math.abs(index)].className = 'indicator active';
                            }
                        }
                    });
                })(i);
            }

            function setTransform(dom, val) {
                dom.style.transform = "translateX(" + val + "px)";
            }

            function getTranslateX(dom) {
                return parseInt(dom.style.transform.replace(/[^\d|^\-]/g, ''));
            }