vue横向滚动图片,vue的图片循环展示
这篇文章主要为大家详细介绍了某视频剪辑软件实现循环滚动图片，多图片轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现循环滚动图片的具体代码，供大家参考，具体内容如下
效果（循环滚动，可切换方向):
轮播组件BaseSwiper.vue:
模板
div class=swiperBox
img class= img left @ click= click left src=./././资产/img/左. png alt=。
img class= img right @ click= click right src=./././资产/img/右. png alt=。
div id=swiper
div class=imgBox
v-for=(item，index) of imgList :key=index
img :src=item /
/div
/div
/div
/div
/模板
脚本
导出默认值{
名称： BaseSwiper ，
道具：{
速度：数量，
方向：字符串，
},
data() {
返回{
imgList: [
要求(./././资产/img/组14 .png’)，
要求(./././资产/img/组15 .png’)，
要求(./././资产/img/组17 .png’)，
要求(./././资产/img/组18 .png’)，
要求(./././资产/img/组24 .png’)，
],
计时器：空，
速度：这个速度，
imgWidth: 260，
方向：这个方向，
}
},
方法：{
单击左(){
this.theDirection= left
},
单击右键(){
这个方向是对的
},
},
已安装(){
设imgBox=document。getelementsbyclassname( imgBox )[0]；
//将imgBox下的图片进行拼接循环展示图片
imgbox。innerhtml=imgbox。innerhtml
设img div=document。getelementsbyclassname( img div )；
imgbox。风格。宽度=img格。长度*这个。图像宽度像素；//设置差异的宽度使图片可以放下
让自我=这个；
console.log(imgBox.offsetWidth，imgBox.style.width)
函数自动滚动(){
if(imgbox。向左偏移-(imgbox。偏移宽度/2)){//提前更新左边的值，实现循环展示
imgbox。风格。左=0；
}
if (imgBox.offsetLeft 0) {//向右滚动提前更新左边的值，实现循环展示
imgbox。风格。left=-(imgbox。offsetwidth/2)“px”；
}
如果(自我。direction== left ){//向左滚动，值为负
自我。速度=-数学。ABS(自我。速度)
} else { //向右滚动
自我。速度=数学。ABS(自我。速度)
}
//求出总的左边的值，等于左边的值加上移动的速度(px值)
imgbox。风格。left=imgbox。偏移左自我。速度“px”；
}
这个。timer=setInterval(自动滚动，30)；//全局变量，保存返回的定时器
},
销毁前(){
清除间隔(这个。定时器)；
this.timer=null
}
}
/脚本
样式范围语言=少。swiperBox {
身高：100%;
宽度：100%;
位置：相对；imgLeft {
左：0;
top:40%；
}。imgLeft。imgRight {
宽度：27px
高度：38px
位置：绝对；
光标：指针；
}。imgRight {
右：0;
top:40%；
}。方向图标：悬停{
不透明度：1;
}
#swiper {
宽度：90%;
身高：100%;
边距：0自动；
溢出：隐藏；
位置：相对；imgBox {
身高：100%;
位置：绝对；
左：0;
top:0；
溢出：隐藏；
显示器：flex。imgDiv {
宽度：100%;
左边距：15px
img {
身高：100%;
宽度：280像素
//宽度：260像素
//高度：120像素
}
}
}
}
}
/风格
父组件调用，只贴出关键代码：
Swiper:speed= 2 :direction= left /Swiper
//引用
从导入捣蛋鬼./BaseSwiper/BaseSwiper
组件：{ Swiper }，
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。