vue实现循环滚动图片

本文实例为大家分享了vue实现循环滚动图片的具体代码,供大家参考,具体内容如下

效果(循环滚动,可切换方向):

轮播组件BaseSwiper.vue:

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

父组件调用,只贴出关键代码:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 解决vue的 v-for 循环中图片加载路径问题

    先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台.当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了. 首先和后台商量一下数据结构,因为图片要和名称一一对应,所以后台要返回中英文的名称的映射,我把前台的图片名称直接设置给后台给的英文名称,从而读取图片,图片和中文名称就一一对应了.数

  • vue实现图片滚动的示例代码(类似走马灯效果)

    上次写了一个简单的图片轮播,这个相当于在上面的一些改进.这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用了slot进行封装. 父: <template> <div id="app"> <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/inde

  • 基于vue实现循环滚动列表功能

    注意:需要给父容器一个height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width. 先来介绍该组件的用法: 1.安装命令: cnpm install vue-seamless-scroll --save 2.main.js文件中作为全局组件引入 import scroll from 'vue-seamless-scroll' Vue.use(scroll) <vue-seamless-scroll :data="listD

  • 在vue中v-for循环遍历图片不显示错误的解决方案

    目录 v-for循环遍历图片不显示错误 错误 vue本地图片路径正确,但for循环不显示 经过改正加个require()就可以显示了 v-for循环遍历图片不显示错误 <template> <div class="demo" :style="{width:innerWidth} + 'px' "> <div class="carousel-inner"> <div v-for="(img,i)

  • 使用vue v-for循环图片路径方式

    目录 v-for循环图片路径 v-for循环图片无法显示 解决方法 v-for循环图片路径 <template> <el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="(item, index) in img" :key="index"> <!-- <

  • vue实现公告消息横向无缝循环滚动

    本文实例为大家分享了vue实现公告消息横向无缝循环滚动的具体代码,供大家参考,具体内容如下 该组件实现了公告消息的无缝横向滚动.我命名为marqueex.vue文件,感谢原来博主的分享,我自己做个总结 marqueex.vue <template> <div class="my-outbox">   <div class="my-inbox" ref='box'>     <div class="my-list&q

  • vue实现循环滚动列表

    本文实例为大家分享了vue实现循环滚动列表的具体代码,供大家参考,具体内容如下 1.安装 vue-seamless-scroll   实例文档链接 cnpm install vue-seamless-scroll --save 2.文件中引入,组件配置 import vueSeamlessScroll from 'vue-seamless-scroll' 3.使用 <template> <vue-seamless-scroll :data="CardPartsStatistic

  • Vue实现一种简单的无限循环滚动动画的示例

    本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例,分享给大家,具体如下: 先看实现效果: 这种类似轮播的效果,通常可以使用轮播的方案解决,只不过相对于我要分享的方案来说,轮播实现还是要复杂些的. Vue提供了一种过渡动画transition-group,这里我便是利用的这个效果 // template <transition-group name="list-complete" tag="div"> <div v-for="v i

  • vue实现列表无缝循环滚动

    本文实例为大家分享了vue实现列表无缝循环滚动的具体代码,供大家参考,具体内容如下 功能介绍: 在PC端网页,包括大数据.官网.后台管理平台开发中,可能会用到这种列表循环滚动的展示. 大致需求: 1.列表可以使用数组循环遍历:2.每隔几秒中列表数据向上滚动一定距离,展示下一条数据:3.滚动到最后一条数据时重新显示第一条开始的数据(类似走马灯.banner图的循环效果): 整体思路: 1.使用两个定时器嵌套实现:2.需要两个相同容器存放同样内容,实现无缝衔接效果: 效果展示: 完整代码: <!DO

  • vue2.0 循环遍历加载不同图片的方法

    demo: <div v-for="item in temps" :key="item.id"> <div class="contract-item"> <img :src="item.imgUrl"> </div> </div> 引入图片,注意路径: import con1 from "@/assets/img/con01.png"; impor

随机推荐