vue移动端轮播图插件,vue 图片滚动播放
这篇文章主要为大家详细介绍了某视频剪辑软件实现自动滑动轮播图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现自动滑动轮播图片的具体代码，供大家参考，具体内容如下
效果如图：(悬浮时暂停，移出后自动轮播)
创建图片滑动轮播组件ImageSlider.vue，可设置轮播间隔区间，当页面没被激活（用户没在浏览当前页面)时，自动暂停，重新浏览当前页面（被激活)时，自动轮播
模板
div class= m-slider @ mouseenter= onStop @ mouseleave= onStart
div class= m-panel ref= slider :style= ` width:$ { width } px；`
差异
图像数据中的v-for=(项目，索引
:key=index
“移动图像”
img:src= item。 src :alt= item。标题/
p class= u-img-title :title= item .标题“{项目。title } }/p
/div
div class=" m-image "
img :src=imageData[0]. src :alt=imageData[0].标题/
p class= u-img-title :title= image data[0].标题{ imageData[0].title }}/p
/div
/div
/div
/模板
脚本
导出默认值{
名称：“ImageSlider”，
道具：{
imageData: { //图片数组
类型：数组，
默认值：()={
return []
}
},
间隔：{ //滑动轮播间隔
类型：数量，
默认值：3000
}
},
data () {
返回{
visibilityChangeEvent:“”。
计时器：空，
imgWidth: 400，//图片宽度，用于生成容器宽度
activeIndex: 0 //当前展示的图片
}
},
计算值：{
宽度(){
返回(这个。图像数据。长度1)*这个。图像宽度
}
},
已创建(){
var hiddenProperty=hidden 在文档中？"隐藏"
:" webkitHidden "在文档中？ webkitHidden
:“mozHidden”在文档中？"隐藏的蚊子"
：空
这个。visibilitychangeevent=隐藏属性。替换(/hidden/I，“visibilitychange”)
var onVisibilityChange=()={
如果(!文档[hiddenProperty]) {
this.onStart()
console.log(页面激活)
}否则{
this.onStop()
console.log(页面非激活)
}
}
文档。addevent侦听器(this。visibilitychangeevent，onVisibilityChange)
setTimeout(()={
this.timer=setInterval(()={ //自动切换
this.onMove()
}，this.interval)
}，this.interval)
},
方法：{
//滑动动画效果
幻灯片效果（目标){
const offsetLeft=this .$refs.slider.offsetLeft //求出元素的当前偏移位置
假设步长=(target - offsetLeft)/10 //由快到慢的过渡效果
step=step 0？数学。ceil(step):数学。地板(台阶)//对每次移动的距离取整，上限：向上取整，楼层：向下取整
setTimeout(()={
如果（目标！==offsetLeft) {
这个参考文献。滑块。风格。left=向左偏移一步 px //移动
this.slideEffect(目标)
}
}, 15) //每隔15毫秒执行一次
},
onSlider (moveX) {
常数偏移=这个.$refs.slider.offsetLeft
const target=offset moveX //要移动的目标位置
this.slideEffect(目标)
},
onMove () {
如果(这个。活跃指数===这个。图像数据。长度-1){//最后一张
this.activeIndex=0 //显示第一张
这个. refs.slider.style.left=0
this.onSlider(-this.imgWidth)
}否则{
this.activeIndex //显示下一张
this.onSlider(-this.imgWidth)
}
},
onStop () {
clearInterval(this.timer)
this.timer=null
},
onStart () {
clearInterval(this.timer)
this.timer=setInterval(()={
this.onMove()
}，this.interval)
},
销毁前(){
文档。removeeventlistener(this。visibilitychangeevent)
clearInterval(this.timer)
this.timer=null
}
}
}
/脚本
style lang=less 范围
@主题颜色：# d 93844。m滑块{
边距：100像素自动；
宽度：400像素
高度：300像素
溢出：隐藏；
位置：相对；m面板{
位置：绝对；
top:0；
左：0;
//宽度：1600像素//(图片数组长度1) * 图片宽度
高度：300像素。m图像{
浮动：左；
宽度：400像素
高度：300像素
img {
宽度：400像素
高度：270像素
光标：指针；
}。u-img-title {
宽度：400像素
字体大小：16px
颜色：# 333;
行高：30px
溢出：隐藏；
文本对齐：左对齐；
光标：指针；
文本溢出：省略号；
显示：-WebKit-box；
-webkit-box-orient:垂直；
-WebKit-line-clamp:1；
：悬停{
字体大小：16px
颜色：@ themeColor
}
}
}
}
}
/风格
在要使用滑动轮播图片的页面引入使用组件，并传入图片数组
图像滑块：图像数据=图像数据:间隔= 3000 /
从" @/组件/图像滑块"导入图像滑块
组件：{
图像滑块
}
data () {
返回{
图像数据：[
{
标题："图像1,图像1,图像1,图像1,图像1,图像1…",
src:图片地址
},
{
标题："图像2,图像2,图像2,图像2,图像2,图像2…",
src:图片地址
},
{
标题："图片3,图片3,图片3,图片3,图片3,图片3…",
src:图片地址
}
]
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。