●、Swiper

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

• Swiper 网站

●、原生js 一个简单的无缝向上滚动

文档
vue 版本

<template>
    <div id="container_list" :style="{height: height+'px'}">
        <ul id="list" :style="{top: 0,width:width+'px',height: height+'px'}">
            <li :style="{height: height+'px','line-height':height+'px'}"
                v-for="(todo,index) in filteredTodos"
                v-bind:key="index">
                <slot v-bind:todo="todo"></slot>
            </li>
            <li :style="{height: height+'px','line-height':height+'px'}">
                <slot v-bind:todo="filteredTodos[0]"></slot>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: "base-ucnavigation",
    props: {
        filteredTodos: {
            type: Array,
            default () {
                return []
            }
        },
        width: {
            type: Number,
            default: 531
        },
        height: {
            type: Number,
            default: 40
        },
        time: {
            type: Number,
            default: 2000
        }
    },
    data () {
        return {
            timer: ''
        }
    },
    computed: {
        length () {
            return this.filteredTodos.length;
        }
    },
    methods: {
        init () {
            if (this.length) {
                this.carouselinit();
            }
        },
        carouselinit () {
            var self = this;
            let list = document.getElementById("list");
            list.style.top = 0 + "px";
            let scroll = function () {
                let top = parseInt(list.style.top);
                if (parseInt(list.style.top) > -self.height * (self.length - 1)) {
                    list.style.transition = "all 0.5s";
                    list.style.top = top - self.height + "px";
                } else {
                    list.style.transition = "";
                    list.style.top = -0 + "px";
                    setTimeout(scroll, 0);
                }
            };
            // 设置定时器执行滚动
            self.timer = setInterval(scroll, self.time);
            // 鼠标上移时不自动滚动
            list.onmouseover = function () {
                clearInterval(self.timer);
            };
            // 鼠标离开后又恢复自动滚动
            list.onmouseleave = function () {
                self.timer = setInterval(scroll, self.time);
            }
        }
    },
    mounted () {
        if (this.length) {
            this.init();
        }
    },
    watch: {
        filteredTodos () {
            if (this.timer) {
                clearInterval(this.timer);
            }
            if (this.length) {
                this.init();
            }
        }
    }
};
</script>
<style lang="less">
    ul, li {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    #container_list {
        position: relative;
        margin: 0 auto;
        overflow-y: hidden;
    }
    #list {
        position: absolute;
        width: 531px;
    }
</style>