EcmaScript6实现跑马灯

首先，我们先来看效果图：

代码实现如下：
HTML部分：

<!--跑马灯-->
        <div id="moveLayout">
            <div id="moveMain">
                <div id="moveImg">
                    <img src="http://www.scsw.edu.cn/xxjsx/images/IMG_7028.jpg" alt="图片1" />
                    <img src="http://www.scsw.edu.cn/xxjsx/images/IMG_6970.jpg" alt="图片2" />
                    <img src="http://www.scsw.edu.cn/xxjsx/images/DSC_0818.jpg" alt="图片3" />
                    <img src="http://www.scsw.edu.cn/xxjsx/images/IMG_3025.jpg" alt="图片4" />
                    <img src="http://www.scsw.edu.cn/xxjsx/images/IMG_4981.jpg" alt="图片4" />
                    <img src="http://www.scsw.edu.cn/xxjsx/images/DSC07347.jpg" alt="图片4" />
                    <img src="http://www.scsw.edu.cn/xxjsx/images/88.jpg" alt="图片4" />
                    <img src="http://www.scsw.edu.cn/xxjsx/images/88.jpg" alt="图片4" />
                </div>
                <div id="movePrevent"></div>
                <!--这个容器是用来防止图片滚动时会出现空白的区域-->
            </div>
        </div>

CSS部分：

/*跑马灯*/

#moveImg,
#moveImg img {
    margin: 0;
    padding: 0;
}

#moveImg img {
    float: left;
    height: 130px;
    width: 180px;
    margin: 0 8px;
    border: 1px solid #ddd;
    padding: 10px;
}

#moveLayout {
    width: 1000px;
    margin: 0 auto;
    height: 150px;
    overflow: hidden;
}

#moveImg,
#movePrevent {
    float: left;
}

#moveMain {
    width: 500%;
    /*这个属性很重要 让容器有足够的宽度实现滚动*/
    float: left;
}

JS部分：

class Paomadeng {
    constructor() {
        this.init()
    }
    init() {
        
        this.v1 = document.getElementById('moveLayout');
        this.v2 = document.getElementById('moveImg');
        this.v3 = document.getElementById('movePrevent');
        this.start();
    }
    start() {
        this.v3.innerHTML = this.v2.innerHTML; //将v2容器里面的图片插入到v3容器里面  使其空白区域被遮住。
        var fun = setInterval(()=>this.event(), 30);
        // 鼠标经过按钮，停止播放
        this.v1.addEventListener('mouseover', () => {//鼠标经过时  清除定时器  停止图片的滚动
            clearInterval(fun)
        })
        // 鼠标离开，继续播放
        this.v1.addEventListener('mouseout', () => { //鼠标离开后  继续滚动图片
            // 重新播放
            fun = setInterval(()=>this.event(), 30);
        })
        
    }
    event(){
        if(this.v1.scrollLeft <= 0) {
            this.v1.scrollLeft = 600;
        } else {
            this.v1.scrollLeft--;
        }
    }
    
}
new Paomadeng();