vue实现循环滚动图片

3403771864 发布于2022-09-12 20:17 / 499人阅读

　　运用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>
　　.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 },

服务器托管 idc机房托管 html图片滚动循环 js循环滚动 html头像循环滚动 js不间断循环滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127674.html

vue-music（1）音乐播发器项目开发记录

摘要：在中新建组件许文瑞正在吃屎。。。。在中添加如下代码三歌手组件开发歌手首页开发数据获取数据获取依旧从音乐官网获取歌手接口创建我们和以前一样，利用我们封装的等发放，来请求我们的接口，返回给。 Vue-Music 跟学一个网课老师做的仿原生音乐APP跟学的笔记，记录点滴，也希望对学习vue初学小伙伴有点帮助 showImg(https://segmentfault.com/img/remot...

happen 2019-08-23 11:29 评论0 收藏0
vue轮播图插件之vue-awesome-swiper

摘要：移动端轮播图插件，在使用图形界面插件中的组件无法实现触摸滑动后，转而使用插件安装我这里安装的是下面的这个版本使用全局导入样式的话，我这里有用到分页器，就在全局中引入了样式组件引入在中使用常见的小圆点移动端轮播图插件，在使用iview图形界面插件中的carousel组件无法实现触摸滑动后，转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesom...

binta 2019-08-23 12:00 评论0 收藏0
vue better-scroll 遇到的坑

摘要：先看效果介绍一个简单的静态页面主要是使用做横向滚动，点击标签滚动到相应位置，以及滚到相应位置后对应标签显示红色。先看效果 showImg(https://segmentfault.com/img/bVbqAdC?w=374&h=626); 介绍一个简单的静态页面主要是使用 better-scroll 做横向滚动，点击标签滚动到相应位置，以及滚到相应位置后对应标签显示红色。开发过程中...

yiliang 2019-08-23 16:30 评论0 收藏0
vue全家桶仿某鱼部分布局以及功能实现

摘要：在这里简单叙述一下我仿某鱼部分布局以及功能实现的过程，仅做学习用途。另一方面，当与现代化的工具链以及各种支持类库结合使用时，也完全能够为复杂的单页面应用提供驱动。可以进行确认收货后删除订单。前言每次写文章时，总会觉得比写代码难多了，可能这就是我表述方面的不足吧，然而写文章也是可以复盘一下自己的开发过程，对自己还是受益良多的。在这里简单叙述一下我仿某鱼部分布局以及功能实现的过程，仅做...

dreamGong 2019-08-23 11:01 评论0 收藏0