vue实现循环滚动图片
更新时间:2022年07月14日 14:06:54 作者:suoh's?Blog
这篇文章主要为大家详细介绍了vue实现循环滚动图片,多图片轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
本文实例为大家分享了vue实现循环滚动图片的具体代码,供大家参考,具体内容如下
效果(循环滚动,可切换方向):
轮播组件BaseSwiper.vue:
<template> ? ? <div class="swiperBox"> ? ? ? ? <img class="imgLeft" @click="clickLeft" src="http://9i0i.com/pic.php?p=../../../assets/img/左.png" alt=""> ? ? ? ? <img class="imgRight" @click="clickRight" src="http://9i0i.com/pic.php?p=../../../assets/img/右.png" alt=""> ? ? ? ? <div id="swiper"> ? ? ? ? ? ? <div class="imgBox"> ? ? ? ? ? ? ? ? <div class="imgDiv" v-for="(item,index) of imgList" :key="index"> ? ? ? ? ? ? ? ? ? ? <img :src="http://9i0i.com/pic.php?p=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 },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。
相关文章
关于vue打包时的publicPath就是打包后静态资源的路径问题
这篇文章主要介绍了vue打包时的publicPath,就是打包后静态资源的路径,本文通过三种情况分析给大家详细介绍,需要的朋友可以参考下2022-07-07
最新评论