直播系统app源码，vue实现循环滚动图片（多图片轮播）

直播系统app源码，vue实现循环滚动图片（多图片轮播）

 轮播组件BaseSwiper.vue：

1

<template><br>    <div><br>        <img @click="clickLeft" src="../../../assets/img/左.png" alt=""><br>        <img @click="clickRight" src="../../../assets/img/右.png" alt=""><br>        <div id="swiper"><br>            <div><br>                <div v-for="(item,index) of imgList" :key="index"><br>                    <img :src="item" /><br>                </div><br>            </div><br>        </div><br>    </div><br></template><br><script><br>export default {<br>    name: 'BaseSwiper',<br>    props: {<br>        speed: Number,<br>        direction: String,<br>    },<br>    data() {<br>        return {<br>            imgList: [<br>                require('../../../assets/img/组 14.png'),<br>                require('../../../assets/img/组 15.png'),<br>                require('../../../assets/img/组 17.png'),<br>                require('../../../assets/img/组 18.png'),<br>                require('../../../assets/img/组 24.png'),<br>            ],<br>            timer: null,<br>            theSpeed: this.speed,<br>            imgWidth: 260,<br>            theDirection: this.direction,<br>        }<br>    },<br>    methods: {<br>        clickLeft() {<br>            this.theDirection = 'left';<br>        },<br>        clickRight() {<br>            this.theDirection = 'right';<br>        },<br>    },<br>    mounted() {<br>        let imgBox = document.getElementsByClassName('imgBox')[0];<br>        //将imgBox下的图片进行拼接 循环展示图片<br>        imgBox.innerHTML += imgBox.innerHTML;<br>        let imgDiv = document.getElementsByClassName('imgDiv');<br>        imgBox.style.width = imgDiv.length * this.imgWidth + 'px';//设置div的宽度使图片可以放下<br>        let self = this;<br>        console.log(imgBox.offsetWidth,imgBox.style.width )<br>        function autoScroll() {<br>            if (imgBox.offsetLeft < -(imgBox.offsetWidth / 2)) {//提前更新left值，实现循环展示<br>                imgBox.style.left = 0;<br>            }<br>            if (imgBox.offsetLeft > 0) {//向右滚动 提前更新left值，实现循环展示<br>                imgBox.style.left = -(imgBox.offsetWidth / 2) + 'px';<br>            }<br>            if (self.theDirection == 'left') { //向左滚动,值为负<br>                self.theSpeed = -Math.abs(self.theSpeed)<br>            } else { //向右滚动<br>                self.theSpeed = Math.abs(self.theSpeed)<br>            }<br>            // 求出总的left值，等于left值加上移动的速度（px值）<br>            imgBox.style.left = imgBox.offsetLeft + self.theSpeed + 'px';<br>        }<br>        this.timer = setInterval(autoScroll, 30);//全局变量 ，保存返回的定时器<br>    },<br>    beforeDestroy() {<br>        clearInterval(this.timer);<br>        this.timer = null;<br>    }<br>}<br></script><br><style scoped><br>.swiperBox {<br>    height: 100%;<br>    width: 100%;<br>    position: relative;<br>    .imgLeft {<br>        left: 0;<br>        top: 40%;<br>    }<br>    .imgLeft,<br>    .imgRight {<br>        width: 27px;<br>        height: 38px;<br>        position: absolute;<br>        cursor: pointer;<br>    }<br>    .imgRight {<br>        right: 0;<br>        top: 40%;<br>    }<br>    .directionIcon:hover {<br>        opacity: 1;<br>    }<br>    #swiper {<br>        width: 90%;<br>        height: 100%;<br>        margin: 0 auto;<br>        overflow: hidden;<br>        position: relative;<br>        .imgBox {<br>            height: 100%;<br>            position: absolute;<br>            left: 0;<br>            top: 0;<br>            overflow: hidden;<br>            display: flex;<br>            .imgDiv {<br>                width: 100%;<br>                margin-left: 15px;<br>                img {<br>                    height: 100%;<br>                    width: 280px;<br>                    // width: 260px;<br>                    // height: 120px;<br>                }<br>            }<br>        }<br>    }<br>}<br></style>

​父组件调用，只贴出关键代码：

1	<Swiper :speed="2" :direction="'left'"></Swiper><br> <br>//引用<br>import Swiper from '../BaseSwiper/BaseSwiper'<br> <br>components: { Swiper },

以上就是 直播系统app源码，vue实现循环滚动图片（多图片轮播），更多内容欢迎关注之后的文章