类似 marquee 的图片左右滑动且无缝对接

  

 

<template>
<div class="main">
    <!-- 左按钮 -->
    <div class="marquee-btn btn-left" @click="directChange('left')">
        <i class="el-icon-arrow-left" />
    </div>
    <div id="marque">
        <div id="inmarque">
            <div id="marque_1">
                <!-- <img src="../../../public/images/summary/img01.jpg" border="0" />
                <img src="../../../public/images/summary/img02.jpg" border="0" />
                <img src="../../../public/images/summary/img03.jpg" border="0" />
                <img src="../../../public/images/summary/img04.jpg" border="0" />
                <img src="../../../public/images/summary/img05.jpg" border="0" />
                <img src="../../../public/images/summary/img06.jpg" border="0" /> -->
                <img v-for="(img,index) of imgList" :key="index" :src="require(`@static/summary/${img}`)" border="0" />
            </div>
            <div id="marque_2"></div>
        </div>   
    </div>
    <!-- 右按钮 -->
    <div class="marquee-btn btn-right" @click="directChange('right')">
        <i class="el-icon-arrow-right" />
    </div> 
</div>
</template>
 
<script>
    export default {
        data() {
            return {
                // 向右
                direction: 'right',
                imgList: FIRST_CFG.summary.list,
                marInter: null
            }
        },
        methods: {
            // 改变图片滚动方向
            directChange(type) {
                this.direction = type;
            },
            // 监听滚动
            marquee(){
                // 整个 marque
                let marque = document.getElementById("marque");
                // marque 1
                let marque_1 = document.getElementById("marque_1");
                // marque 2
                let marque_2 = document.getElementById("marque_2");
                if(this.direction === 'left') {// 向左
                    if(marque_2.offsetWidth - marque.scrollLeft <= 0)
                        marque.scrollLeft -= marque_1.offsetWidth
                    else{
                        marque.scrollLeft++;
                    }
                }
                else {// 向右
                    if(marque.scrollLeft <= 0)
                        marque.scrollLeft += marque_2.offsetWidth
                    else{
                        marque.scrollLeft--;
                    }
                }
            }
        },
        mounted() {
            // 速度，值越大越慢
            let speed = 20; 
            // 整个 marque
            let marque = document.getElementById("marque");
            // marque 1
            let marque_1 = document.getElementById("marque_1");
            // marque 2
            let marque_2 = document.getElementById("marque_2");
            // 赋值
            marque_2.innerHTML = marque_1.innerHTML;
            this.marInter = setInterval(this.marquee, speed);
            marque.οnmοuseοver = () => {clearInterval(this.marInter)};
            marque.οnmοuseοut = () => {this.marInter=setInterval(this.marquee, speed)};
        },
        destroyed() {
            clearInterval(this.marInter);
        }
    }
</script>
 
<style lang="stylus" scoped>
.main {
    position: relative;    
    #marque {
        position: relative;
        display:inline-block;
        background: #FFF;
        overflow:hidden;
        width: 100%;
        z-index: 300;
        // background:red;
        img {
            widht:180px;
            height:144px;
            border: 3px solid #F2F2F2;
            cursor:pointer;
        }
        #inmarque {
            float: left;
            width: 800%;
            #marque_1,
            #marque_2 {
                float: left;
            }
        }
    }
    .marquee-btn {
        position:absolute;
        width:30px;
        height:154px;
        line-height:154px;
        background:rgba(255,255,255,.4);
        // background:#000;
        z-index: 301;
        cursor:pointer;
        color:#fff;
    }
    .btn-left {
        left: 0;
    }
    .btn-right {
        right:0;
        top: 0;
        bottom: 0;
    }
}
</style>