轮播图小案例

原理

总的容器：

 幻灯片容器：

里面的图片大小与总的容器大小相同

 

 移动的距离：索引*幻灯片的宽度

代码：

 <div id="slider" class="slider">
        <div class="slider-item-container">
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/1.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/2.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/3.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/4.jpg" alt="slider" class="slider-img">
                </a>
            </div>
            <div class="slider-item">
                <a href="###" class="slider-link">
                    <img src="img/5.jpg" alt="slider" class="slider-img">
                </a>
            </div>
        </div>
    </div>

 <script src="js/hammer.min.js"></script>
    <script src="js/slider.js"></script>
    <script>
        var slider = new Slider(document.getElementById('slider'), {
            initIndex: 0, // 初始显示第几张幻灯片，从0开始
            speed: 300, // 幻灯片的切换速度
            hasIndicator: true // 是否需要指示器indicator
        });

        var hammer = new Hammer(slider.getItemContainer());

        // 是否在滑动
        var isSwiping = false;

        // 拖动时--手指拖动时
        hammer.on('panmove', function(ev) {

            // 求出移动是距离
            var distance = ev.deltaX + slider.getDistanceByIndex(slider.getIndex());

            // 让幻灯片移动
            slider.move(distance);
        });

        // 拖动完成后--手指抬起后
        hammer.on('panend', function(ev) {
            if (isSwiping) return;

            // deltaX-手指开始拖动到拖动完成手指抬起后所移动的x的距离
            var distance = ev.deltaX + slider.getDistanceByIndex(slider.getIndex());

            var index = getIndexByDistance(distance);

            slider.to(index);
        });

        // 根据容器移动的距离获取索引
        function getIndexByDistance(distance) {
            if (distance > 0) {
                return 0;
            } else {
                return Math.round(-distance / slider.getDistancePerSlide());
            }
        }

        // 快速左滑动切换
        hammer.on('swipeleft', function(ev) { // next
            isSwiping = true;
            slider.next(function() {
                isSwiping = false;
            });
        });

        // 快速右滑动切换
        hammer.on('swiperight', function(ev) { // prev
            isSwiping = true;
            slider.prev(function() {
                isSwiping = false;
            });
        });
    </script>

/*css reset*/

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

img {
    border: none;
    vertical-align: top;
}

a {
    -webkit-tap-highlight-color: transparent;
}


/*slider*/

.slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 183px;
}

.slider-item-container,
.slider-item,
.slider-link,
.slider-img {
    width: 100%;
    height: 100%;
}

.slider-item-container {
    display: flex;
    transition: transform 0;
}

.slider-item {
    flex-shrink: 0;
}

.slider-link {
    display: block;
}

.slider-indicator-container {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.slider-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #000;
    opacity: 0.2;
    border-radius: 50%;
    margin-right: 8px;
}

.slider-indicator-active {
    background-color: #007aff;
    opacity: 1;
}