博客

外联javascript

<script src="https://cdn.bootcss.com/holder/2.9.6/holder.js"></script>

html

<div class="container">
        <div class="wrapper">
            <div class="item"><img data-src="holder.js/100px200?bg=#90a&text=1" alt=""></div>
            <div class="item"><img data-src="holder.js/100px200?bg=#c23&text=2" alt=""></div>
            <div class="item"><img data-src="holder.js/100px200?bg=#a23&text=3" alt=""></div>
            <div class="item"><img data-src="holder.js/100px200?bg=#d23&text=4" alt=""></div>
            <div class="item"><img data-src="holder.js/100px200?bg=#23e&text=5" alt=""></div>
        </div>
    </div>

css

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        
        .wrapper {
            position: absolute;
            /* left: 0; */
            /* top: 0; */
            width: 100%;
            height: 200px;
        }
    </style>

transformCSS.js  如需查看，请翻阅前一篇博客。

<script src=”transformCSS.js”></script>

javascript

<script>
        // 获取变量
        var container = document.querySelector('.container');
        var wrapper = document.querySelector('.wrapper');
        var index = 0;

        // 复制幻灯片内容
        wrapper.innerHTML += wrapper.innerHTML;

        // 触摸开始 两个值
        container.addEventListener('touchstart', function(e) {
            // 判断临界值
            if (index == 0) {
                index = 5;
                var newTop = -container.offsetHeight * index;
                transformCSS(wrapper, 'translateY', newTop);
            }
            if (index == 9) {
                index = 4;
                var newTop = -container.offsetHeight * index;
                transformCSS(wrapper, 'translateY', newTop);
            }

            container.y = e.changedTouches[0].clientY;
            container.t = transformCSS(wrapper, 'translateY');
            wrapper.style.transition = 'none';
        });
        // 触摸移动 两个值
        container.addEventListener('touchmove', function(e) {
            container._y = e.changedTouches[0].clientY;
            newTop = container._y - container.y + container.t;
            // console.log(container._y, container.y, container.t)
            transformCSS(wrapper, 'translateY', newTop);
        });
        // 触摸结束 两个值
        container.addEventListener('touchend', function(e) {
            wrapper.style.transition = 'all 0.5s';
            // 最后的触摸位置
            container._y = e.changedTouches[0].clientY;
            var distance = Math.abs(container._y - container.y);
            // 判断自增自减
            if (distance > container.offsetHeight / 2) {
                // 判断向上还是向下
                if (container._y > container.y) {
                    index++;
                }
                if (container._y < container.y) {
                    index--;
                }
            }
            var newTop = -container.offsetHeight * index;
            // 设置css
            transformCSS(wrapper, 'translateY', newTop);
            wrapper.style.transition = 'all 0.5s';
        });

        // 自动播放
        function autoRun() {
            timer = setInterval(function() {
                index++;
                var newTop = -container.offsetHeight * index;
                transformCSS(wrapper, 'translateY', newTop);
                wrapper.style.transition = 'all 0.5s';
            }, 2000);
        }
        autoRun();

        // transitionend
        wrapper.addEventListener('transitionend', function() {
            if (index == 9) {
                index = 4;
                var newTop = -container.offsetHeight * index;
                transformCSS(wrapper, 'translateY', newTop);
                wrapper.style.transition = 'none';
            }
        });
    </script>